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
  }
}