vue3中使用swiperjs（6版本）

1.安装swiper.js

npm i swiper@6

2.在需要使用的页面引入css和组件

import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/swiper-bundle.css";
// 自动轮播，切换按钮，底部小圆点
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

3.使用

<swiper
            class="swiper-container"
            :navigation="{
              nextEl: '.swiper-button-next',//前进后退按钮
              prevEl: '.swiper-button-prev',
            }"
            :pagination="{ clickable: true }"//分页器小圆点配置
            :autoplay="{ disableOnInteraction: false }"//自动轮播配置
            loop//循环轮播
          >
            <swiper-slide
              class="swiper-slide"
              v-for="(banner, index) in banners"
              :key="index"
            >
              <img :src="banner" alt="" />
            </swiper-slide>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-button-next"></div>
            <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
          </swiper>