swiper控件（回調函數）

來源

  屬性：

swiper.slides.length

 

一、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位置

 

二、onTouchStart \ onTouchMove \ onTouchEnd 

監聽當前slide滑動狀態

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

 

三、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>

 

四、onImagesReady

回調函數，全部內置圖像加載完成後執行，同時「updateOnImagesReady」需設置爲「true’。

內置標籤內使用 img

 

五、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>

 

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

七、onReachBeginning \ onReachEnd (swiper): function(){...}

八、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。

 

九、onAutoplay \ onAutoplayStart \ onAutoplayTop

十、onLazyImageLoad \ onLazyImageReady

十一、onSlideNextStart  \ onSlideNextEnd 下滑觸發(開始及結束)

十二、onSlidePrevStart  \ onSlidePrevEnd 上滑動（開始及結束時觸發）

1三、onScroll：function(swiper){...}            須要設置 mousewheelControl : true

1四、onKeyPress  在容許鍵盤控制狀態下，按鍵盤時會觸發這個函數。  keyboardControl:true

1五、onBeforeResize  \  onAfterResize  回調函數：當swiper跟隨windows變化尺寸先後觸發。