Vue3使用Swiper8.x

1.安装Swiper，指定版本

npm install swiper@8.0.7 --save

2.在所需文件中引入swiper组件

import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
import { Pagination,Navigation, Autoplay, Scrollbar, A11y } from 'swiper';

3.引入所需样式文件

import 'swiper/swiper.min.css';
import 'swiper/modules/pagination/pagination.min.css'; //轮播图底面的小圆点
import 'swiper/modules/navigation/navigation.min.css'; // 左右切换
import 'swiper/modules/autoplay/autoplay.min.css'; // 自动切换
import 'swiper/modules/scrollbar/scrollbar.min.css'; // 滚动条

4.完整JS：

<script>
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
import { Pagination,Navigation, Autoplay, Scrollbar, A11y } from 'swiper';
import 'swiper/swiper.min.css';
import 'swiper/modules/pagination/pagination.min.css'; //轮播图底面的小圆点
import 'swiper/modules/navigation/navigation.min.css'; // 左右切换
import 'swiper/modules/autoplay/autoplay.min.css'; // 自动切换
import 'swiper/modules/scrollbar/scrollbar.min.css'; // 滚动条

export default {
  name: 'Swiper8',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      modules: [ Pagination,Navigation,Autoplay,Scrollbar,A11y ],
      getDataList:[
        {
          title:'第一张',
          imgUrl:'http://p9.itc.cn/images01/20201223/130d8599c0e8470cad7d7373b60a09d4.jpeg',
          href:'',
          id:1,
        },
        {
          title:'第二张',
          imgUrl:'http://i0.hdslb.com/bfs/article/b90c18f53c9331efe6ebddf77f3b2765790095a3.jpg',
          href:'',
          id:2
        },
        {
          title:'第三张',
          imgUrl:'https://img.zcool.cn/community/01666d5d8c5889a801211d53ed3909.jpg@2o.jpg',
          href:'',
          id:3
        }
      ],
      mySwiper:null
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 轮播初始化-执行
    onSwiper(swiper){
      console.log('============onSwiper=========',swiper);
      this.mySwiper = swiper
    },
    // 每个slide切换执行
    onSlideChange(swiper){
      console.log('============onSlideChange=========',swiper);
    },
    prevEl(e) {
      console.log('============prevEl=========');
      this.mySwiper.slidePrev()
    },
    nextEl(){
      console.log('============nextEl=========');
      this.mySwiper.slideNext()
    },
  }
};
</script>

5.完整template：

<!-- vue3-swiper-8.x -->
<template>
  <div class="swiper-lyout">
    <div class="swiper-content-wrap">
      <!-- direction :方向 默认水平 要设置为垂直方向时 - vertical direction="vertical" -->
      <!-- loop ：是否闭环轮播 -->
      <!-- speed : 切换时间 -->
      <!-- :slides-per-view="3" 一屏展示几个 -->
      <!-- :space-between="50" 间隔 -->
      <!-- autoplay属性值为一个对象，用于控制自动轮播的时间和事件等，delay的值为毫秒数，disableOnInteraction默认为true，设为false后可以实现在用户交互（滑动）后不会禁用自动播放，轮播将在每次交互后重新启动。 -->
      <!-- :autoplay="{ delay: 1000, disableOnInteraction: false }" -->
      <!-- scrollbar： 是否显示轮播图的滚动条， draggable设置为 true就可以拖动底部的滚动条 -->
      <!--navigation 可以是 boolean 也可以json配置   -->
      <!-- :navigation="{nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev'}" -->
      <swiper
        ref="mySwiperRef"
        class="my-swiper-container"
        :loop="true"
        :speed="1000"
        :modules="modules"
        :pagination="{ clickable: true }"
        :scrollbar="{ draggable: false }"
        :navigation="{nextEl: '.swiper-button-next-a',prevEl: '.swiper-button-prev-a'}"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <template v-for="item in getDataList" :key="item.id">
          <swiper-slide>
            <img :src="item.imgUrl" alt="">
          </swiper-slide>
        </template>
        <!-- 默认的 分页器 滚动  -->
        <!-- <div class="swiper-button-prev" @click.stop="prevEl"></div> -->
        <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
        <!-- <div class="swiper-button-next" @click.stop="nextEl"></div> -->
        <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </swiper>
    </div>
    <a-space>
      <!-- 自定义 切换 -->
      <a-button type='primary' calss="swiper-button-prev-a" @click='prevEl'>切换上一张</a-button>
      <a-button type='primary' calss="swiper-button-next-a" @click='nextEl'>切换下一张</a-button>
    </a-space>
  </div>
</template>

6.样式可自定义-该示例样式

<style lang="less">
.swiper-lyout {
  .swiper-content-wrap{
    width: 600px;
    height: 350px;
    .my-swiper-container{
      width: 100%;
      height: 100%;
      .swiper-wrapper{

      }
      .swiper-slide{
        
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>