swiper控件(回调函数)

来源

  属性:

swiper.slides.length

1、onInit(swiper): function(){...}

      swiper初始化完成,会调回调  onInit 方法 获取当前swiper索引值

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
      //Swiper初始化了
      //alert(swiper.activeIndex);提示Swiper的当前索引
    }
})
</script>

当设置属性值

initialSlide: 1
 //alert(swiper.activeIndex);提示Swiper的当前索引 为: 1

通过设置该属性,指定当前swiperSlide位置

2、onTouchStart onTouchMove onTouchEnd 

监听当前slide滑动状态

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
onTouchStart: function(swiper,even){
      alert('事件触发了;');
    }
})
</script>

3、onSlideChangeStart 、 onSlideChangeEnd

回调函数,swiper从当前slide开始过渡到另一个slide时执行。触摸情况下,如果释放slide时没有达到过渡条件而回弹时不会触发这个函数,此时可用onTransitionStart
可接受swiper实例作为参数,输出的activeIndex是过渡后的slide索引。

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
      alert(swiper.activeIndex);
    }
})
</script>

4、onImagesReady

回调函数,所有内置图像加载完成后执行,同时“updateOnImagesReady”需设置为“true’。

内置标签内使用 img

5、onTransitionStart  onTransitionEnd

回调函数,过渡开始时触发,接受Swiper实例作为参数。

Swiper运作原理
Swiper常用运作方式有两种:手动触摸切换或者导航切换(前进后退按钮,键盘控制,分页器,内置方法slideTo等)
1. 手动触摸切换拖动阶段Swiper根据手势位置实时设定wrapper的位移(onSetTranslate),释放拖动时Swiper会设定一次wrapper自由过渡(onSetTranslate、onSetTransition、onTransitionStart、onSlideChangeStart)。速度为speed直到过渡结束(onTransitionEnd、onSlideChangeEnd)。
2. 导航切换可参考手动触摸释放阶段

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
onTransitionStart: function(swiper){
      ...
    }
})
</script>

6、onClick  onTap  onDoubleTap (swiper, event): function(){...}

7、onReachBeginning  onReachEnd (swiper): function(){...}

8、onDestroy(swiper): function(){...}

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
onDestroy: function(swiper){
alert('你销毁了Swiper;');
    }
})
$('#btn1').click(function(){
mySwiper.destroy(false); 
})
</script>

设为false则不销毁Swiper对象,默认为true。

9、onAutoplay onAutoplayStart onAutoplayTop

10、onLazyImageLoad  onLazyImageReady

11、onSlideNextStart   onSlideNextEnd 下滑触发(开始及结束)

12、onSlidePrevStart   onSlidePrevEnd 上滑动(开始及结束时触发)

13、onScroll:function(swiper){...}            需要设置 mousewheelControl : true

14、onKeyPress  在允许键盘控制状态下,按键盘时会触发这个函数。  keyboardControl:true

15、onBeforeResize    onAfterResize  回调函数:当swiper跟随windows变化尺寸前后触发。

原文地址:https://www.cnblogs.com/congxueda/p/7389045.html