一、使用方法 官網地址參考此文章（點選我）二、常見情況

• 圖片需要動態獲取時

  待資料載入成功且渲染完畢後，進行節點初始化。例：

axios.post(‘介面地址’, 引數).then(response => {   
    this.pages = response.data; //pages 渲染資料的陣列
    this.$nextTick(() => { //渲染結束
        // mySwiper 裡面的屬性按需配置，詳情見官網
        let mySwiper = new Swiper(".swiper-container", { 
            initialSlide :0,//預設播放（值為圖片下標）
            loop: false,//不迴圈
            speed: 600, //切換速度
            paginationClickable: true, //點選小點可以切換
        });
      });
});
 

• 當有 3 組圖片需要依次播放時（多組以此類推） 情景：第 2 組圖片滑動最後一張時,需要載入第 3 組圖片；第 2 組圖片滑動第一張時，需要載入第 1 組圖片。 方法：在初始化的時候，配置回撥函式onTouchStart(開始滑動的X軸值）和 onTouchEnd(結束滑動的X軸值）。用差值來判斷是往前滑還是往後劃。

   this.$nextTick(() => {
     let mySwiper = new Swiper(".swiper-container", {
       observer: true, //修改swiper自己或子元素時，自動初始化swiper
       observeParents: true, //修改swiper的父元素時，自動初始化swiper         
       onTouchStart: function(swiper) {
         this.positionStart = swiper.getWrapperTranslate();
       },
       onTouchEnd: function(swiper) {
         this.positionEnd = swiper.getWrapperTranslate();
         if (this.positionStart > this.positionEnd && this.pages.length - 1 == this.mySwiper.activeIndex) { 
             //向後滑，載入後一組圖片              
         } else if (mySwiper.activeIndex == 0 && this.positionStart < this.positionEnd) {
             //向前劃，載入前一組圖片   
         }
       }
     });
   });
   
  

這時，圖片已經載入了另外一組圖片，但是各組圖片之間沒有連貫起來，這就需要用到 slideTo方法去跳轉（若載入第 3 組，則跳轉到下標第 0 個；若載入第 1 組，則跳轉到下標第 圖片個數-1 個）。

mySwiper.slideTo('要跳轉的圖片下標', 10, false) // 10表示跳轉速度；false 代表是否觸發回到函式