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变化尺寸前后触发。