vue 项目 完整的swiper使用案例

安装命令
vue  
npm install swiper@5.2.0 --save-dev
npm install vue-awesome-swiper@4 --save-dev`
html
  <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(item, index) in listImg" :key="index">
            <img :src="item" />
          </swiper-slide>
        </swiper>

<script>
import { getTeacher, getCourse, getBasics, getCImage } from "@/api/home.js";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        // 自动播放
        autoplay: true,
        // 切换速度
        speed: 300,
        // 无限循环
        loop: true,
        slidesPerView: "auto",
        loopedSlides: 5,
        // loopAdditionalSlides: 3,
      
        // 一列显示几行
        slidesPerView: 3,

        grid: {
          fill: "column",
          rows: 1,
        },
      },
</script>