vue使用swiper6/vue-awesome-swiper

1、先下载

npm install swiper vue-awesome-swiper --save

2、局部使用

<swiper class="swiper-container" ref="mySwiper" :options="swiperOption" :auto-play="true">
      <swiper-slide v-for="(item, index) in banners" :key="index" class="swiper-item">
        <img v-lazy="item" />
      </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>

import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay, Navigation, EffectFade } from "swiper/core";
import getAwesomeSwiper from "vue-awesome-swiper/dist/exporter";
import "swiper/swiper-bundle.min.css";
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass);
SwiperClass.use([Pagination, Mousewheel, Autoplay, Navigation, EffectFade]);

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
	return{
		banners: [
			require("../../../../../public/banner/1.jpg"),
        	require("../../../../../public/banner/2.jpg"),
        	require("../../../../../public/banner/3.jpg"),
        	require("../../../../../public/banner/4.jpg"),
        	require("../../../../../public/banner/5.jpg")
		],
		swiperOption: {
        initialSlide: 0,
        autoplay: true,
        speed: 2000,
        effect: "fade",
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
          renderBullet: function(index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
          renderBullet: function(index, className) {
            let text = "";
            switch (index) {
              case 0:
                text = "壹";
                break;
              case 1:
                text = "贰";
                break;
              case 2:
                text = "叁";
                break;
              case 3:
                text = "肆";
                break;
              case 4:
                text = "伍";
                break;
            }
            return '<span class="' + className + '">' + text + "</span>";
          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
	}
  }
 }

参考：https://www.npmjs.com/package/vue-awesome-swiper