vue使用swiper踩坑（轮播图不自动播放，上一张下一张按钮不起作用）

为了不浪费大家时间，先说一下，最后解决办法是使用vue-awesome-swiper，并且要注意版本号及其对应的API，本文中的API写法和3.1.3版本的vue-awesome-swiper是对应的，可以实现轮播图自动播放以及前一张后一张按钮 不失效。

一个心路历程

准备使用swiper实现轮播图

• 根据Swiper API官网：

1. 首先，安装依赖包

$ npm install swiper

2. 导包及使用

// import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/swiper-bundle.css';

  const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

坑点：不用框架的情况下可以使用，用了vue框架可以实现轮播，但是发现swiper-button-prev、swiper-button-next可以显示但是没有用。

解决办法1: 把new Swiper()写在mounted里：

// import Swiper JS
  import Swiper from 'swiper';
  // import Swiper styles
  import 'swiper/swiper-bundle.css';

  mounted: function () {
  const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

天真的我发现还是一样的问题，无法自动播放以及前后按钮无作用。

解决办法2: 使用vue-awesome-swiper插件

vue项目要专门使用vue-awesome-swiper插件

• 首先安装依赖：

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

• 引入：

进入maim.js文件
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
    
Vue.use(vueSwiper)

<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>
    export default {
        data(){
            return {
                swiperOption:{
                    //显示分页
                    pagination: {
                      el: '.swiper-pagination'
                    },
                    //设置点击箭头
                    navigation: {
                      nextEl: '.swiper-button-next', 
                      prevEl: '.swiper-button-prev'
                    },
                    //自动轮播
                    autoplay: {
                      delay: 2000,
                      //当用户滑动图片后继续自动轮播
                      disableOnInteraction: false,
                    },
                    //开启循环模式
                    loop: true
                }
            }
        }
    }
</script>

还是没有解决！！！！！我都无语了。。。大无语！！！

抠细节

翻了大家遇到这个问题的解决办法，看到一个离谱的，就是说版本不对，之前看到都划过去了，总觉得不会是这个问题。。。后来好多办法都试了，想想前端因为版本号不同，出bug还少吗。。。就因为webpack和webpack-cli的版本不对应项目半天运行不起来的情况还少吗。。。好吧。。。
认命去降版本去了。。。

• 降版本到3.1.3：

npm install swiper vue-awesome-swiper@3.1.3 --save

问题解决。。。。啊这。。。