vue2使用swiper5.2.0

 官方文档：swiper

npm i swiper@5.2.0

<template>
  <div>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div v-for="(v, i) in 10" :key="i" class="swiper-slide">
          第{{v}}个
        </div>
      </div>

      <!-- 导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"
import "swiper/css/swiper.css"
export default {
  data () {
    return {}
  },
  mounted () {
    this.getSwiper()
  },

  methods: {
    getSwiper () {
      new Swiper(".swiper", {
        slidesPerView: 4, //每组数量
        spaceBetween: 5,  //间隔（px）
        navigation: {  //导航按钮
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents: true//修改swiper的父元素时，自动初始化swiper
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.swiper::v-deep {
  overflow: hidden;
  width: 100%;
  height: 100%;
  .swiper-wrapper {
    width: 100%;
    user-select: none;
  }
  .swiper-button-prev {
    left: 2px;
    color: #fff;
  }
  .swiper-button-next {
    right: 2px;
    color: #fff;
  }
  .swiper-button-disabled {
    opacity: 0.1;
  }
}
</style>

要注意一点，如果你的轮播的数据是接口返回的，要在数据都拿到后再初始化swiper，不然无效

mounted () {
    let that = this
    this.$nextTick(async () => {
      await this.getHelpInfo()
      that.getSwiper()
    })
  },