swiper3 breakpoints响应式制作方法

swiper3如果做响应式的滑屏呢

那么我们就要用到breakpoints属性了!

 var mySwipercp = new Swiper('.swi', {
slidesPerView: 3,//在默认屏幕下,我们设置一行3个进行滚动
}

那么我们如果做响应式的话就需要随着屏幕滚动,一行三个就会显得图片太小看不清了,那么我们就需要用到breakpoints来进行调节了

 var mySwipercp = new Swiper('.swi', {
slidesPerView: 3,//在默认屏幕下,我们设置一行3个进行滚动
breakpoints: {
640: { //640屏幕下设定
slidesPerView: 2, //一行2个
spaceBetween: 10 //这是swiper的每个元素间隔的设置
},
320: { //320屏幕下设定
slidesPerView: 1, //一行2个
spaceBetween: 0 //这是swiper的每个元素间隔的设置
}
}
}

好了,swiper3制作响应式就说道这里了!

不过这个属性 是不支持swiper2的 ,如果要兼容

请参考http://www.xhcss.com/xh/js/jiaocheng/146.html 一文

写的好!

微信扫一扫赏大洋