Swiper轮播插件手动滑动后，无法自动切换的问题解决
今天在写一个移动端的页面，使用 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',
},
})声明：本文由w3h5原创，转载请注明出处：《Swiper轮播插件手动滑动后，无法自动切换的问题解决》 https://cloud.tencent.com/developer/article/1537808
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录