Vue中使用 vue-awesome-swiper 插件实现轮播图效果

最近项目中需要实现轮播图效果，对比了几个轮播图插件之后，个人觉得vue-awesome-swiper比较方便好用，用法如下：
1、npm导入对应的包：

npm install vue-awesome-swiper --save

2、main.js中添加：

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

3、向需要使用轮播图的vue文件中添加

<swiper :options="swiperOption" class="swiper-container swiper-pagination"  ref="mySwiper">
        <!-- 添加的图片 -->
        <swiper-slide><img class="index_img" src="../index/img1.jpg" /> </swiper-slide>
        <swiper-slide><img class="index_img" src="../index/img2.jpg"/> </swiper-slide>
        <swiper-slide><img class="index_img" src="../index/img3.jpg"/> </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>

4、向需要使用轮播图的vue文件中的script标签中添加：

require('swiper/dist/css/swiper.css');
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          slidesPerView: 1, //用到的loop个数
          spaceBetween: 30,
          centeredSlides: false,
          spaceBetween: 0,

　　　　　　//循环播放
　　　　　　loop:true,
　　　　　　//自动播放
　　　　　　autoplay{
　　　　　　　　delay:3000,
　　　　　　　　disableOnInteraction:false
　　　　　　}
　　　　　　// 回调方法
          onSlideChangeEnd: swiper => {
            this.page = swiper.realIndex+1;
            this.index = swiper.realIndex;
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
　　　　　　 pagination: {
　　　　　　　el: '.swiper-pagination',
 　　　　　　clickable: true,
　　　　　　　},
　　　　　　}
　　　　　}
 　　　},