Time:2022-11-08 21:47:20 Author:Gavin

Step

• Fitst: 執行npm i -S swiper@5,添加 swiper 庫，因為 6 可能有 bug,所以用 5
  引包（css）,在main.js中加入import "swiper/css/swiper.min.css";

• Second: 書寫 template 中 DOM 結構

  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>
  
    <!-- 如果需要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

• Third: new Swiper 實例，實現展示效果,必須在所有 DOM 結構生成後起效
  引入import Swiper from "swiper";
  在生命週期或方法裏添加如下代碼將 swiper 實例化

  var mySwiper = new Swiper("獲取到的DOM節點", {
      loop: true,
      // 如果需要分頁器
      pagination: {
        el: ".swiper-pagination",
        //點擊小球的時候也切換圖片
        clickable: true,
      },
      // 如果需要前進後退按鈕
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });