特殊轮播图，Swiper插件在vue2上的运用

注意：swiper@5以上版本只能在vue3项目上使用，vue2使用swiper@5以下版本(包裹@5版本)

1、安装插件

npm i vue-awesome-swiper@4.1.1 

npm i swiper@5.4.5

2、引入

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

// 注册轮播组件

 components: {  Swiper, SwiperSlide  }

 3、视图

 4、配置项

5、效果图

6、附上我的代码

<template>
  <div class="swiper">
    <swiper
      :style="{ width: '100%', height: '100%' }"
      ref="mySwiper"
      :options="swiperOptions"
      @mouseenter.native="mouseEnter"
      @mouseleave.native="mouseLeave"
    >
      <swiper-slide v-for="(item, i) in data.swiperData" :key="i">
        <div class="swiper-item">
          <div class="swiper-item-picture">
            <img :src="item.pictureUrl" alt="" />
          </div>
          <div class="swiper-item-describe">{{ item.describe }}</div>
        </div>
      </swiper-slide> 
    </swiper>
    <!-- swiper两边按钮 -->
    <!-- <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div> -->
  </div>
</template>

<script>
// swiper轮播引入
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  data() {
    return {
      data: {},
      // swiper配置项
      swiperOptions: {
        slidesPerView: 5, // 没页展示多少个swiper-slide，会一个个推进式轮播
        autoplay: true,   // 是否自动轮播
        // // swiper两边按钮
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
      },
    };
  },
  components: {
    // 轮播组件
    Swiper,
    SwiperSlide,
  },
  computed: {},
  created() {
    // 获取数据
    let data = require("@/datas/bottom-swiper.json");
    this.data = data;
    this.data.swiperData = data.swiperData.map((item) => {
      item.pictureUrl = require("../assets" + item.pictureUrl);
      return item;
    });
  },
  mounted() {},
  methods: {
    // swiper鼠标移入移出
    mouseEnter() {
      this.$refs.mySwiper.$swiper.autoplay.stop();
    },
    mouseLeave() {
      this.$refs.mySwiper.$swiper.autoplay.start();
    },
  },
};
</script>

<style lang='scss' scoped>
.swiper {
  width: 100%;
  height: 100%;
  padding: 0 0.1rem;
  &-item {
    height: 100%;
    padding: 0.1rem 0.15rem;
    &-picture {
      width: 100%;
      height: 90%;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    &-describe {
      width: 100%;
      height: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.14rem;
      color: #cbccd3;
    }
  }
}
</style>