swiper5 和 vue-awesome-swiper4

安装（版本必须匹配）：
yarn add swiper@5
yarn add vue-awesome-swiper@4

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style
import 'swiper/css/swiper.css'

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

<!-- The ref attr used to find the swiper instance -->
<template>
  <div>
    <swiper :options="swiperOption" id="mySwiper" ref="mySwiper">
      <!-- slides -->
      <swiper-slide class="swiper_slide_item">I'm Slide 1</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 2</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 3</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 4</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 5</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 6</swiper-slide>
      <swiper-slide class="swiper_slide_item">I'm Slide 7</swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <button @click="to(1)">Slide 1</button>
    <button @click="to(2)">Slide 2</button>
    <button @click="to(3)">Slide 3</button>
    <button @click="to(4)">Slide 4</button>
    <button @click="to(5)">Slide 5</button>
    <button @click="to(6)">Slide 6</button>
    <button @click="to(7)">Slide 7</button>
  </div>
</template>

<script>
export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 点击分页器跳切换到相应的幻灯片
        },
        loop: true,
        // speed: 1000, // 动画切换速度
        autoplay: {
          delay: 2000, // 幻灯片停留时间
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          stopOnLastSlide: true, // 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
        },
        on: {
          slideChangeTransitionEnd: function () {
            console.log(this.activeIndex); //切换结束时，告诉我现在是第几个slide
          },
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  methods: {
    to(index) {
      this.swiper.slideTo(index - 1)
    }
  },
  mounted() {
    console.log(this.swiper);
  },
};
</script>

<style lang="less">
#mySwiper .swiper-wrapper {
  .swiper_slide_item.swiper-slide {
    height: 400px;
    background-color: coral;
  }
}
</style>