這是swiper專門為了vue開發出的外掛，引數基本一樣

https://www.swiper.com.cn/

vue中使用

npm install vue-awesome-swiper

元件中引入

  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

            <swiper
              ref="carouselSwiper"
              :options="carouselSwiperOptions"
              v
 
-if="carouselList.length"
            >
              <swiper-slide
                v-for="(item, index) in carouselList"
                :key="index"
              >
                <img class="carouselImg" :src="item.picPath" alt="carousel圖片">
                <div class="swiper-slide-title
 
">{{item.title}}</div>
                <div class="swiper-title-bgc"></div>
              </swiper-slide>
              <div class="swiper-pagination"  slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class
 
="swiper-button-next" slot="button-next"></div>
            </swiper>

說明：

carouselSwiperOptions是配置檔案

v-if="carouselList.length" 新增這行是為了引數有值以後，才呼叫swiper，不然會有其他問題（比如展示的不是第一條資料）

  // eslint-disable-next-line no-unused-vars
  let Vm = null

定義在最外面

// 輪播圖swiper配置
        carouselSwiperOptions: {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          initialSlide: 0,
          // 自動播放
          autoplay: {
            delay: 6000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          // 滑動速度
          speed: 1500,
          // horizontal
          direction: 'horizontal',
          observer: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on: {
            click: function () {
              // 上一頁、下一頁點選和點選圖片都會觸發click方法，
              // 不過上一頁、下一頁點選時，clickedIndex為undefined
              if (this.clickedIndex === undefined) {
                return
              }
              //  realIndex當前點選的圖在列表的index值
              const realIndex = this.realIndex
              // 要在最外層定義Vm，直接使用this訪問不到vue例項
              Vm.swiperClick2(realIndex)
            }
          }
        },