vue中swiper手动滑动后不能自动播放的解决方法

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

Swiper3.x

<script> 
  var mySwiper = new Swiper('.swiper-container',{
	autoplay : 3000,
	autoplayDisableOnInteraction : false,   // 用户操作swiper之后,是否禁止autoplay
  })
</script>

Vue

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in swiperList">
        <img class="swiper-img" :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: 2000, // 可设置数值来指定播放速度
        autoplayDisableOnInteraction: false,   // 用户操作swiper之后,是否禁止autoplay
        speed: 400,     // 切换图片速度
        loop: true      // 循环播放
      }
    }
  },
  props: ['swiperList']
}
</script>

Swiper4.x

<script> 
var mySwiper = new Swiper('.swiper-container',{
  autoplay: {
    disableOnInteraction: false,    // 用户操作swiper之后,是否禁止autoplay
  },
})
</script>
  • 16
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半度℃温热

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值