解决:使用 swiper 自动轮播图片,当拖动过 swiper 内的内容时,导致不继续自动轮播

Posted 小白历险记~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决:使用 swiper 自动轮播图片,当拖动过 swiper 内的内容时,导致不继续自动轮播相关的知识,希望对你有一定的参考价值。

当使用了 swiper 后:

var mySwiper = new Swiper(‘.banner .swiper-container‘, {
    autoplay: 3000,
    loop: true,
    pagination: ‘.swiper-pagination‘,
    autoplayDisableOnInteraction : false
})
解决办法即是设置这个参数: autoplayDisableOnInteraction 

官网给出的参数介绍:

用户操作 swiper 之后,是否禁止 autoplay 。默认为 true:停止。
如果设置为 false,用户操作 swiper 之后自动切换不会停止,每次都会重新启动 autoplay。
操作包括 触碰,拖动,点击 pagination 等。

以上是关于解决:使用 swiper 自动轮播图片,当拖动过 swiper 内的内容时,导致不继续自动轮播的主要内容,如果未能解决你的问题,请参考以下文章

[swiper4.0]自动轮播+循环轮播

vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)

vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay)

swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

uniapp实现app端图片+视频轮播

swiper4自动轮播切换手动触碰后停止踩坑——属性disableOnInteraction