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")[this.activeIndex]).click();
   },
},


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM