swiper 手动滑动轮播图后不会自动轮播的问题
以前做图片轮播的时候没有手动滑动过轮播,所以说第一次出现这种问题的时候,我一直以为是我设置的时间比较长,最后发现我太天真了
我打开chrome控制台后发现,我手动触发轮播图后虽然在页面中不会自动轮播,但是在控制台的看到的还是一直在轮播着,只是图片不能动了
我们平时写的控制轮播的代码是:
var mySwiper = new Swiper('.swiper-container',{
loop: true,
autoplay: 3000,
pagination : '.swiper-pagination'
});
我们只需要在这上面加上一个属性就好了,改善后的代码:
var mySwiper = new Swiper('.swiper-container',{
loop: true,
autoplay: 3000,
pagination : '.swiper-pagination',
autoplayDisableOnInteraction : false
});
只是加了一个autoplayDisableOnInteraction,那么这个属性是什么意思呢,再次看swiper的官方文档后你会发现,这个属性代表着用户操作swiper之后,是否要禁止autoplay。默认的状态是true,既是禁止的。
如果设置成false则代表,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。