vue中使用swiper组件，解决手动切换轮播后自动轮播失效的问题

最新推荐文章于 2024-03-13 16:25:53 发布

yuwenwenwenwenyu

最新推荐文章于 2024-03-13 16:25:53 发布

阅读量3.1k

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yuwenwenwenwenyu/article/details/131576324

版权

vue中使用swiper组件，解决手动切换轮播后自动轮播失效的问题

使用swiper组件，设置自动轮播并且显示左右滑动按钮，会发现手动点击左右按钮之后，自动轮播便会失效，

    new Swiper(".swiper-container", {
        slidesPerView: 4, //一页显示4个
        //是否循环播放
        loop: true,
        autoplay: {
          delay: 3000 //3秒切换一次
        },
        //滑动方向
        direction: 'horizontal',
        //左右切换按钮
        navigation: {
          nextEl: ".swiper-button-next-customize",
          prevEl: ".swiper-button-prev-customize",
        },
      });

查询相关资料发现，swiper 的autoplay中有一个 disableOnInteraction 属性：disableOnInteraction，使用之后每一次都会重新启动 autoplay
修改代码如下，便可解决问题

    new Swiper(".swiper-container", {
        slidesPerView: 4, //一页显示4个
        //是否循环播放
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 3000 //3秒切换一次
        },
        //滑动方向
        direction: 'horizontal',
        //左右切换按钮
        navigation: {
          nextEl: ".swiper-button-next-customize",
          prevEl: ".swiper-button-prev-customize",
        },
      });