起因：

Swiper由於設定了autoplay，會自己滾動，怎麼解決吶，我先升級到了4.3.2發現，預設呼叫沒有解決這個問題，查看了Swiper API 發現了個解決方式，分享給大家。

PS: 查看了3.X.X 的API 感覺沒辦法解決，建議升級到4.X.X版本 , 不能完全相容，但是改動成本不大

解題思路：

1.分析原因

滾動錯位原因我分析有兩個

A. 前後建立了兩首尾個元素, 導致獲取的不是真正的元素，下圖是 4個頁面 + 兩個 紅框的首尾

B.手勢操作時，沒有暫停當前滾動中的迴圈，導致滾動和切換同步操作最後錯位

2.嘗試解決方法

問題A 由於實現機制問題，解決起來不方便，所以主要 解決問題B

問題B 解決思路（劃重點）：

A. 監聽滾動事件，查詢是否有相關封裝的API

B. 如何呼叫滾動監聽

C.如何暫停和開啟迴圈

D.如何串聯使用

解決：

1.在 touchStart 的時候 暫停 迴圈

2.在 touchEnd 的時候 開啟 迴圈

3.優化：設定全域性變數，避免過快操作導致的問題 

具體程式碼：

JS程式碼很簡單啦，給大家參考下

    // 全域性變數
    let meetingSwiper;
    let touchnow = false;

    // 設定Swiper
    meetingSwiper = new Swiper('.main_meeting', {
      pagination: {
        el: '.swiper-pagination-meeting',
        clickable: true,
      },
      loop: true,
      autoplay: {
        disableOnInteraction: true,
      },
      observer: true,
    });
    
    // 關閉迴圈
    meetingSwiper.on("touchStart", function() {
      // console.log('Swiper touchStart');
      meetingSwiper.autoplay.stop();
    });

    // 開啟迴圈
    meetingSwiper.on("touchEnd", function() {
      // alert('Swiper touchend');
      // console.log('Swiper touchEnd');
      if (!touchnow) {
        touchnow = true;
        window.setTimeout(function() {
          meetingSwiper.autoplay.start();
          touchnow = false;
          // console.log('Swiper touchEnd');
        }, 100);
      }
    });
 

慣例Demo

連結參考：