首先安装swipper插件，本次使用的是swipper5的版本

npm install swiper@5

导入到指定的vue当中，本次案列是在一个页面当中使用，所以在单个vue当中导入的

import Swiper from 'swiper' import swiper/css/swiper.css

在页面当中的使用

<template>
  <div class="swiper" id="mySwiper">
      <div class="swiper-wrapper" >
         <div class="swiper-slide" v-for="(item,index) in datalist" :key=item.id>
           <img :src="item.src" alt="" :data-type="item.id"/>
         </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
</template>

<script>
// import Vue 不是必须的，需要手动指定 Vue 的版本时，可以解开注释
// import Vue from 'vue';
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
  props:{
    datalist:{
      type:Array,
      default:()=>{}
    }
  }
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    
  },
  updated(){
    let vm=this
    var mySwiper=new Swiper('.swiper',{
      //点击图片跳转
      on:{
        click:function(e){
          let id=e.target.dataset.type
          vm.$emit('routego',id)//传出事件
        }
      },
      allowTouchMove:false,//是否支持鼠标拖动图片
      loop:true,//无限循环
      pagination:{
        el:'.swiper-pagination',
        clickable:true,
      },
      navigation:{
        nextEl:'.swiper-button-next',
        prevEl:'.swiper-button-prev',
        hiddenClass:'my-button-hidden'//自定义切换按钮隐藏的类名
      },
      autoplay:{
        delay:3000,
      },
      slidesPreView:3,//可视区域图片展示的数量
      observe:true,//监控数据变化，重置swiper
      observeParents:true,//监控父组件数据变化，重置swiper
      grid:{
        fill:'column',//网格布局，
        rows:1//一行展示
      },
      //鼠标移入，移除轮播暂定，切换按钮展示与隐藏
      mySwiper.el.onmouseover=()=>{
        mySwiper.autoplay.stop()
        mySwiper.navigation.$nextEl.css('display','block')
        mySwiper.navigation.$prevEl.css('display','block')
      },
      mySwiper.el.onmouseout=()=>{
        mySwiper.autoplay.start()
        mySwiper.navigation.$nextEl.css('display','none')
        mySwiper.navigation.$prevEl.css('display','none')
      }
    })
  }
};
</script>

<style>

</style>