輪播工具swiper在vue2的使用

1. swiper官網： https://www.swiper.com.cn/

2. 使用方法：由於舊項目是vue2的項目，只能用swiper5版本或以下的（下最新的版本要vue3項目）

   1. 安裝：npm install swiper@5.4.5 --save-dev

   2. JS引用依賴：

      import Swiper from 'swiper'// 注意引入的是Swiper
      import 'swiper/css/swiper.min.css' // 注意這里的引入
      

   3. 頁面：

      <div class="swiper-container">
              <div class="swiper-wrapper">
                <div v-for="(list,index) in arrList" :key="index" class="swiper-slide">
                  <!--  每個滑塊的內容 -->
                </div>
              </div>
              <!-- 如果需要分頁器 -->
              <div class="swiper-pagination"></div>
              <!-- 如果需要導航按鈕 -->
              <!-- <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div> -->
        </div>
      .swiper-slide{
          width:auto;/*根據內容調整寬度*/
       }
      

   4. 初始化(放mounted里面)：

      new Swiper('.swiper-container', { // 參數配置：具體可以參考官網的API
            loop: true,
            effect: 'coverflow', // swiper的切換效果，這個是以3d效果切換的
            grabCursor: true, // 該選項給Swiper用戶提供小小的貼心應用，設置為true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀。（根據瀏覽器形狀有所不同）
            centeredSlides: true, // 設定為true時，active slide會居中，而不是默認狀態下的居左
            pagination: { //分頁器的類
              el: '.swiper-pagination'
            },
            coverflow: {  // 3d切換的參數設置
              rotate: 30, // 旋轉的角度
              stretch: 50, // 拉伸   圖片間左右的間距和密集度
              depth: 50, // 深度   切換圖片間上下的間距和密集度
              modifier: 3, // 修正值 該值越大前面的效果越明顯
              slideShadows: true // 頁面陰影效果
            },
            rewind: true,
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            slidesPerView: 'auto', //  根據slide的寬度自動調整展示數量。此時需要設置slide的寬度，如下style所示
             on: {// 這個是獲取當前的滑塊的索引 
                  slideChange: function() {
                  //  that.active = this.activeIndex
                  }
                }
          })
      

   5. 使用到的其他的方法：

      //指定滑動到指定的滑塊,官網都有
      const mySwiper = new Swiper('.swiper-container-past', {參數}
      setIndex(index) {
            this.mySwiper.slideTo(index, 1000, false) // 切換到第一個slide，速度為1秒
          }