vue中swiper手动滑动后不能自动播放的解决方法
swiper手动滑动后不能自动播放的解决方法用户操作swiper之后,是否禁止autoplay。默认为true:停止。如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。操作包括触碰,拖动,点击pagination等。Swiper3.x<script>var mySwiper = new Swiper('.swiper-c...
·
用户操作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>
更多推荐
已为社区贡献29条内容
所有评论(0)