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

admin

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

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


1：鼠標移動到輪播圖暫停輪播(这个适合autoplay:true情况的时候使用，否则会触发swiper自动轮播

1. mySwiper.el.onmouseover = function(){
   
2.   mySwiper.autoplay.stop();
   
3. }
   
4. mySwiper.el.onmouseout = function(){
   
5.   mySwiper.autoplay.start();
   
6. }

复制代码

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事件：滑块改变触发

1. on: {
   
2.    slideChangeTransitionStart: function(){
   
3.      $($(".digitalReading .digitalReading_left .textBox img")[this.activeIndex]).click();
   
4.    },
   
5. },

复制代码