注意: 反向自动切换效果启用版本为 4.1.0
效果展示
完整代码
var swiper = new Swiper('.swiper', {
slidesPerView: 3, // 设置slider容器能够同时显示的slides数量,可以设置为数字(可为小数,小数不可loop),或者 'auto'则自动根据slides的宽度来设定数量
direction : 'vertical', // Swiper的滑动方向,可设置为水平方向切换 horizontal 或垂直方向切换 vertical
spaceBetween: 10, // 在slide之间设置距离(单位px)
autoplay: {
delay: 3000, // 自动切换的时间间隔,单位ms
disableOnInteraction: false, // 用户操作swiper之后,是否禁止autoplay。默认为true:停止
reverseDirection: true, // 关键代码,开启反向自动轮播
},
observer: true, // 开启动态检查器,监测swiper和slide,监测到DOM变化,更新Swiper
observeParents: true, // 当Swiper 的祖先元素发生变化时,例如show/hide、第一级子元素增加/删除等,则更新Swiper
roundLengths : true, // 防止某些分辨率的屏幕上文字或边界(border)模糊
loop: true,
speed: 300,
on: {
slideChangeTransitionEnd: function() {
this.autoplay.start(); // swiper从一个slide过渡到另一个slide结束时执行,防止 disableOnInteraction 设置无效
}
},
});