vue-awesome-swiper 大家应该都熟悉吧，在这里我就不多说了，不知道在使用的过程中有没有遇到过有些配置也不生效，在这里分享下如何使用 vue-awesome-swiper 以及封装自己的 swiper 组件，以满足自己的需求。

• 官方首页：vue-awesome-swiper (opens new window)

• GitHub地址：vue-awesome-swiper (opens new window)

安装 vue-awesome-swiper

npm install vue-awesome-swiper --save-dev

全局引入vue-awesome-swiper

在 vue 的 min.js 文件中全局引入

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

在组件中引入vue-awesome-swiper

进入自己的轮播图组件中

<template>
    <swiper :options="swiperOption">
        <swiper-slide class="swiper-slide" v-for="(item,index) in carouselArr" :key="index">
            <img :src="item"/>
        </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>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data(){
    return {
        swiperOption:{
            //显示分页
            pagination: {
                el: '.swiper-pagination'
            },
            //设置点击箭头
            navigation: {
                nextEl: '.swiper-button-next', 
                prevEl: '.swiper-button-prev'
            },
            //自动轮播
            autoplay: {
                delay: 2000,
                //当用户滑动图片后继续自动轮播
                disableOnInteraction: false,
            },
            //开启循环模式
            loop: true
        }
    }
  }
}
</script>

封装自己的swiper组件（推荐）

这种方式的灵活度比较大，更适合特殊场景下使用

1、安装下载依赖

npm install swiper --save-dev

2、挂在到 vue 上以便全局调用

import Vue from 'vue';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.css'
Vue.prototype.$swiper = Swiper;

3、进入自己的轮播图组件中

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperObj: null
    };
  },
  props: ["content"],
  watch: {
    content(data) {
      this.swiperInit();
    }
  },
  mounted() {
    this.swiperInit();
  },

  methods: {
    swiperInit() {
      let Swiper = this.$swiper;
      this.$nextTick(() => {
        let effect = 0;
        let swiper = new Swiper(".swiper-container", {
          loop: true,
          speed: 1500,
          autoplay: true,
          cssMode: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          },
          pagination: {
            el: ".swiper-pagination"
          },
          mousewheel: true,
          keyboard: true
        });
        let comtainer = document.querySelector(".swiper-container");
        comtainer.onmouseenter = () => {
          swiper.autoplay.stop();
        };
        comtainer.onmouseleave = () => {
          swiper.autoplay.start();
        };
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>