知识专栏
多方位、多角度、深度解读您所关心的问题

使用swiper官方的代码后,会有一个问题,就是在手动操作滑动轮播图之后,不能自动轮播了,这就是一个问题。

用户手动操作swiper之后,是否禁止autoplay。代码默认为true:停止。

解决这个问题的方法其实不难,也就是加一段代码,如下所示:

   autoplay: {
  disableOnInteraction: false,
  delay:5000,
   },

上述代码就是设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。

操作包括触碰,拖动,点击pagination等,自动切换都不会停止。

完整样例代码参考如下:

    var swiper = new Swiper(".banner", {
   autoplay: {
  disableOnInteraction: false,
  delay:5000,
   },
      navigation: {
        nextEl: '.banner .swiper-button-next',
        prevEl: '.banner .swiper-button-prev',
      },
    });

上述代码是简单版,可以根据自己的需求,再增加更多的swiper参数设置。

猜您还想看: 轮播失效 自动轮播 swiper
赞一下
--
踩一脚
--

您已成功复制微信号

leishi010

打开微信添加好友?

确定