Vue cli3 使用 Swiper輪播

效果：

---

一、進入swiper中文網下載引用文件

swiper中文網 下載地址

二、引入文件

app.vue 引入樣式

@import url("./assets/css/swiper.min.css");

main.vue 須要使用輪播的組件（不能全局...沒搞懂）引入js

import Swiper from '@/assets/js/swiper.min.js'

三、添加 HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 若是須要分頁器 -->
    <div class="swiper-pagination"></div>

    <!-- 若是須要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

四、初始化一個輪播

/**初始化輪播圖 */
var mySwiper = new Swiper('.swiper-container', {
  loop: true, // 循環模式選項
  speed: 500, //切換時長
  // grabCursor: true, //設置爲true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀。
  autoplay: {
    delay: 3000,   //自動切換延時
    stopOnLastSlide: false, //若是設置爲true，當切換到最後一個slide時中止自動切換。（loop模式下無效）。
    disableOnInteraction: false, //用戶操做swiper以後，是否禁止autoplay。默認爲true：中止。
  },
  keyboard: true,  //鍵盤切換

  // 若是須要分頁器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,  //此參數設置爲true時，點擊分頁器的指示點分頁器會控制Swiper切換。
  },

  // 若是須要前進後退按鈕
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

五、修改一些樣式

<style scoped>
    .swiper-container {
      width: 100%;
      height: 450px;
      /* background: #3399ff; */
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 30px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    .swiper-container {
      --swiper-theme-color: #f00; /* 設置Swiper風格 */
      --swiper-pagination-color: #f00; /* 分頁器顏色 */
      --swiper-navigation-color: #f00; /* 單獨設置按鈕顏色 */
      --swiper-navigation-size: 40px; /* 設置按鈕大小 */
    }
</style>

<style>
    span.swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      outline: none;
      margin: 0 6px !important;
    }
</style>