vue3使用swiper 完整步驟

注意: 使用之前請確定使用的swiper版本，避免走一些不必要的彎路（筆者踩過來的）本文采用的是vue3.0、swiper^8.1.0。

1、安裝依賴

npm install swiper

2、vue文件引入

<template>
     <swiper
          :slides-per-view="3"
          :navigation="{
            nextEl: '.swiper-button-next', //前進后退按鈕
            prevEl: '.swiper-button-prev',
          }"
          :pagination="{ clickable: true }" //分頁切換按鈕
          :autoplay="{ disableOnInteraction: false }" //自動播放
          loop  //開啟循環
          :scrollbar="{ draggable: true }"
          class="teacher_ul"
        >
          <swiper-slide
            class="teacher_li"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="teacher_pW">
                <p class="teacher_p1">{{ item.category_name }}</p>
                <p class="teacher_p2">- {{ item.category_desc }} -</p>
              </div>
          </swiper-slide>
        </swiper>
</template>
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  Autoplay,
} from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue'
import "swiper/scss";
import "swiper/scss/navigation";
import "swiper/scss/pagination";
 
import { ref, defineComponent, reactive, onMounted, toRefs, nextTick } from 'vue'
 
SwiperCore.use([Navigation, Pagination, Scrollbar, Autoplay]);
export default defineComponent({
  name: 'index',
  components: {
    Swiper,
    SwiperSlide
  }
}