vue2使用轮播图插件swiper，vue-awesome-swiper

欢迎使用插件：swiper，vue-awesome-swiper

注释vue2使用方式：

1: npm install swiper vue-awesome-swiper -–save
2: npm install vue-awesome-swiper@3.1.3 -–save
3:在入口文件main.js文件中添加如下代码：

import vueSwiper from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
Vue.use(vueSwiper); // 轮播图

轮播组件代码：

<template>
  <div>
    <!-- 轮播图组件 -->
    <swiper
      :options="swiperOption"
      ref="mySwiper"
      style="width: 100%; height: 100%"
      class="vue-swiper"
    >
      <swiper-slide
        class="swiper-slide swiper-container-3d"
        v-for="(banner, index) in swiperSlides"
        :key="index"
      >
        {{ banner }}
        <!-- <img :src="banner.img" style="width: 100%; height: 100%" /> -->
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左右箭头 -->
      <!-- @click="prev" -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <!-- @click="next" -->
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "carouselChart",
  components: {},
  data() {
    return {
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        //设置slider容器能够同时显示的slides数量
        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 30, // 轮播元素的间隔
        //显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 允许分页点击跳转
        },
        //设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      bannerList: [
        {
          // img: require(''),
        },
      ],
      swiperSlides: [1, 2, 3, 4, 5],
    };
  },

  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.vue-swiper {
  height: 300px;
  width: 100%;
  background-color: gold;
  position: relative;
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    background-color: red;
    height: 260px;
  }
  .swiper-pagination {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 220px auto;
  }
  .swiper-button-prev {
    position: absolute;
  }
  .swiper-button-next {
    position: absolute;
  }
}
</style>

效果如下图：