今天在写一个移动端的页面,使用 swiper 轮播插件写了一个 banner 轮播,并设置了自动滑动。
var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, // 循环模式选项 autoplay: true, // 自动切换 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, })
经过测试发现,手动滑动切换之后,自动播放不在起效,就无法自动切换了。
查询相关资料发现,swiper 有一个 disableOnInteraction
属性:
disableOnInteraction
用户操作 swiper 之后 ,是否禁止 autoplay
。默认为true:停止。
如果设置为 false
,用户操作 swiper 之后自动切换不会停止,每次都会重新启动 autoplay
。
操作包括触碰,拖动,点击 pagination
等。
根据官方实例,作出修改如下:
var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, // 循环模式选项 autoplay: { disableOnInteraction: false, delay: 3000, }, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, })