admin 发表于 2023-2-22 14:02:43

swiper鼠标放上去停止滚动属性方法教程


swiper鼠标放上去停止滚动属性方法教程

swiper轮播图鼠标悬停暂停滑动、静止手动滑动、从第几个开始轮播...


1:鼠標移動到輪播圖暫停輪播(这个适合autoplay:true情况的时候使用,否则会触发swiper自动轮播
mySwiper.el.onmouseover = function(){
mySwiper.autoplay.stop();
}
mySwiper.el.onmouseout = function(){
mySwiper.autoplay.start();
}
2、禁止手动滑动
在最外层加上类名:swiper-no-swiping(给个别滑块加类名可以单独给对应滑块加);

allowTouchMove: false,配置里加上这个是所有的滑块禁止手动滑动;

3、手动鼠标滑动了轮播图后,停止了自动轮播?
解决办法:配置autoplay项--- autoplay: { disableOnInteraction: false,delay: 2500, }

disableOnInteraction:

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

4、轮播图默认从第几个开始轮播?
配置属性 initialSlide :dayIndex,

5、slideChangeTransitionStart事件:滑块改变触发
on: {
   slideChangeTransitionStart: function(){
   $($(".digitalReading .digitalReading_left .textBox img")).click();
   },
},

页: [1]
查看完整版本: swiper鼠标放上去停止滚动属性方法教程