1.安装插件

npm i swiper@5

2.引入相应的js和css包

在相应的组件内引入swiper

import Swiper from 'swiper'

引入css文件，如果多个地方用到轮播图，就在入口文件内引入

// 引入swiper的样式
import 'swiper/css/swiper.css'

3.在template加入轮播图的结构,注意每个版本都有点区别的

  <div class="swiper-container" id="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="carous in bannerList" :key="carous.id">
          <img :src="carous.imagUrl">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条
        <div class="swiper-scrollbar"></div> -->
      </div>

4.创建Swiper实例

 var mySwiper = new Swiper ('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            // scrollbar: {
            // el: '.swiper-scrollbar',
            // },
              autoplay: {
                delay: 1000,
                // 用户操作不停止自动播放
             disableOnInteraction: false,
  
            } //1000，即1秒切换一次
        })  

注意点：页面中的轮播图的结构必须加载完后再去创建Swiper实例

如果图片数据是通过异步得到，并且结构是有v-for去渲染的，那么创建实例是不能在mounted()里面去完成的，数据还没有异步得到，结构是没有被完全渲染的

解决方式：watch+nextTick

watch监听是否已经获取到数据，nextTick是完全渲染完成后执行里面的内容（v-for渲染完成）

 watch:{
      bannerList:{
          handler(newValue,oldValue)
          {
              this.$nextTick(()=>{
             var  mySwiper = new Swiper ('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            
            // 如果需要分页器
            pagination: {
            el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            // scrollbar: {
            // el: '.swiper-scrollbar',
            // },
              autoplay: {
                delay: 1000,
                // 用户操作不停止自动播放
             disableOnInteraction: false,
  
            } //1000，即1秒切换一次
        })  
        console.log(this.bannerList);   
        //自动播放开始  
        this.mySwiper.autoplay.start();
              })
          }
      }
  },

封装轮播图组件

注册为全局组件

// 封装轮播图的全局组件
Vue.component('Carsouel',Carsouel);

轮播图组件

<template lang="">
        <div class="swiper-container" id="mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="carous in list" :key="carous.id">
          <img :src="carous.imgUrl">
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <!-- 如果需要滚动条
        <div class="swiper-scrollbar"></div> -->
      </div>
</template>
<script>
import Swiper from 'swiper'
export default {
    name:'Carsouel',
    props:['list'],
    mySwiper:null,
    watch:{
      list:{
        // 最开始就执行一次
         immediate:true,
          handler(newValue,oldValue)
          {
            // console.log(this.list);
            // if(newValue.length!=0)
            // {
             this.$nextTick(()=>{
                this.mySwiper = new Swiper ('.swiper-container',{
                // direction: 'vertical', // 垂直切换选项
                 loop: true, // 循环模式选项
            
                 // 如果需要分页器
                 pagination: {
                el: '.swiper-pagination',
                },
            
                // 如果需要前进后退按钮
                   navigation: {
                   nextEl: '.swiper-button-next',
                   prevEl: '.swiper-button-prev',
            },
                // 如果需要滚动条
                // scrollbar: {
                // el: '.swiper-scrollbar',
                // },
                autoplay: {
                delay: 1000,
                // 用户操作不停止自动播放
              disableOnInteraction: false,
  
            } //1000，即1秒切换一次
          })  
              this.mySwiper.autoplay.start();
              })
            }
          // }
  },
  beforeDestroy() {
    console.log('stop')
    this.mySwiper.autoplay.stop();
  },
    }
}
</script>
<style lang="">
    
</style>