柚子快报激活码778899分享:实现滑动效果

http://yzkb.51969.com/

html

工作在xx

柚子快报激活码778899分享:实现滑动效果  第1张

柚子快报激活码778899分享:实现滑动效果  第1张

柚子快报激活码778899分享:实现滑动效果  第1张

柚子快报激活码778899分享:实现滑动效果  第1张

css

.environment {

height: 650px;

background-color: #F6F8FC;

.environment-title {

text-align: center;

font-size: 30px;

font-weight: bold;

padding-top: 80px;

}

.swiper-container {

margin-top: 60px;

//border: 1px solid red;

.swiper-slide {

width: 840px;

height: 360px;

}

}

}

js

var swiper = new Swiper('.swiper-container', {

slidesPerView: "auto",

autoHeight:true,

spaceBetween: 50,

freeMode: true,

// autoplay: {

// delay: 2500,

// disableOnInteraction: false,

// },

// loop: true

});

引入swiper

布局的时候,就要结合一些插件来实现最终效果!

这里的slidesPerView要设置成自动“auto”,否则宽高不好控制。

柚子快报激活码778899分享:实现滑动效果

http://yzkb.51969.com/

参考阅读

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。