可以实现的功能：点击左右切换图片，拖拽图片使图片切换，自动切换图片

cmd中 输入命令 npm install swiper@5.4.5 vue-awesome-swiper --save

main.js中编写输入代码

/* 引入swiper */
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

需要用到swiper的vue文件中，引入响应组件如

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

全部代码如下：

<template>
  <div>
    <div class="swiper-container">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <img src="../../assets/img/er.png" alt />
        </swiper-slide>
        <swiper-slide>
          <img src="../../assets/img/bg.png" alt />
        </swiper-slide>
      </swiper>
      <div class="swiper-button-prev swiper-button-black"></div>
      <div class="swiper-button-next swiper-button-black"></div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "Test",
  data() {
    return {
       swiperOptions: {
        pagination: {
          el: ".swiper-pagination"
        },
        loop: true,
        //切换速度
        speed: 1000,
        //左右箭头按钮
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next"
        },
        //不需要自动轮播时
        // autoplay: false,
      // 设置自动轮播的延迟时间
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      }
    };
  },
  /* 引入组件 */
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(1, 1000, false);
  },
};
</script>
<style scoped>
.swiper-container {
  width: 200px;
  height: 100px;
  background-color: #f00;
  text-align: center;
}
</style>

使多张图片一起轮播，
效果图：

图片小而丑，但是效果实现了，，

代码如下：

<template>
  <div>
    <div class="swiper-container">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for='item in lists' :Key='item.id' class='s_img'>
          <img :src="item.src" alt="">
        </swiper-slide>
      </swiper>
      <div class="swiper-button-prev swiper-button-black"></div>
      <div class="swiper-button-next swiper-button-black"></div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "Test",
  data() {
    return {
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 20,
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        //切换速度
        speed: 1000,
        //左右箭头按钮
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next",
        },
        //不需要自动轮播时
        // autoplay: false,
        // 设置自动轮播的延迟时间
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
      lists:[
        { id: 1, src: require("../../assets/img/er.png")},
        { id: 2, src: require("../../assets/img/er.png")},
        { id: 3, src: require("../../assets/img/er.png")},
        { id: 4, src: require("../../assets/img/er.png")},
      ]
    };
  },
  /* 引入组件 */
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    this.swiper.slideTo(1, 1000, false);
  },
};
</script>
<style scoped>
.swiper-container {
  width: 200px;
  height: 100px;
  background-color: #f00;
  text-align: center;
}
.s_img{
  width:50px;
}
.s_img img{
  width:100%;
  height:100%;
}
</style>