如何在vue2项目中使用Swiper5组件

一、背景

之前做的业务需要在vue2中插入一个Swiper组件，但是尝试了很多次都一直失败，官方文档和能搜索到的方法也对我不太有用，总是报错！后来在大佬的视频（https://www.bilibili.com/video/BV1TY4y1z7Z8/?spm_id_from=333.337.search-card.all.click&vd_source=d45e199a358edbf199494ee895775ab3）中才明白是vue版本和Swiper版本没有对应上的问题。

所以，如果你是在维护一个基于vue2的项目，并想在其中插入Swiper组件，可以继续阅读这篇文章。

二、安装Swiper5

目前Swiper已经更新到8了，但Swiper7、Swiper8主要针对vue3。在vue2项目中，Swiper5相对来说更好使用。

2.1 安装（版本必须匹配）：

yarn add swiper@5
yarn add vue-awesome-swiper@4

或者
 npm install [email protected] [email protected] --save

2.2main.js

   import VueAwesomeSwiper from'vue-awesome-swiper'
   import 'swiper/css/swiper.css'
   Vue.use(VueAwesomeSwiper)

2.3 基础代码

<template>
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
            <img src="@/assets/images/banner1.jpg" width="100%" alt="">
        </swiper-slide>
        <swiper-slide>
            <img src="@/assets/images/banner2.jpg" width="100%" alt="">
        </swiper-slide>
        <swiper-slide>
            <img src="@/assets/images/banner3.jpg" width="100%" alt="">
        </swiper-slide>
        <!-- 轮播点 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <!--  -->
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</template>
 
<script>
export default {
    data() {
        return {
            swiperOptions: {//swiper配置信息
                //分页器
                pagination: {
                    el: '.swiper-pagination'
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //自动轮播
                loop: true,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                }
            }
        }
    }
}
</script>
 
<style>
 
</style>

2.4 添加一些配置

<!-- 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>