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

今天在写一个移动端的页面,使用 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',
    },
})


推荐阅读:

CSS3中元素背景的 gradient 渐变属性

Linux下如何重置MySQL密码

JQuery几个mouse事件的区别和用法

PHP连接MySQL数据库报错:Call to undefined function mysql_connect()的解决方法

Photoshop保存ICO格式插件 ICOFormat.8bi

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)