Swiper轮播插件手动滑动后，无法自动切换的问题解决

德顺

发布于 2023-08-25 13:48:37

1K0

发布于 2023-08-25 13:48:37

文章被收录于专栏：前端资源

今天在写一个移动端的页面，使用 swiper 轮播插件写了一个 banner 轮播，并设置了自动滑动。

微信截图_20190706234158.png Swiper轮播插件手动滑动后，无法自动切换的问题解决经验总结

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',
    },
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-07-06)，如有侵权请联系 cloudcommunity@tencent.com 删除

pagination