vue安装使用swiper插件实现轮播图效果采坑笔记！

最开始我用的官方的swiper，发现切换失效，左右切换及导航器都是异常！最后选择使用vue-awesome-swiper插件。

1.安装swiper

npm install vue-awesome-swiper --save

2.main.js中引用

import 'swiper/swiper.less'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.html使用组件

<swiper :options="swiperOption">
   <swiper-slide>slide1</swiper-slide>
   <swiper-slide>slide2</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.data中设置组件数据
 

swiperOption: {
　　autoplay: {
　　　　delay: 3000,
　　　　disableOnInteraction: false // 手动切换之后继续自动轮播
　　},
　　navigation: {
　　　　nextEl: '.swiper-button-next',
　　　　prevEl: '.swiper-button-prev'
　　},
      pagination: {
　　　　el: '.swiper-pagination',
　　　　clickable: true // 允许点击小圆点跳转
　　}
}

常见问题：

1.swiper不会自动滚动，左右切换失效，版本不兼容，降到版本，从新启动项目即可。
解决方式：
npm uninstall vue-awesome-swiper --save
npm install vue-awesome-swiper@3.1.3 --save

2.swiper-pagination导航器不显示

pagination: {
          el: '.swiper-pagination'
}

网上大多数教程再说，直接配置的问题，其实我已经配置，最后折磨我了好久发现，这个版本的swiper的css是单独的！需要引入导航器的css：swiper-bundle.min.css，真是一句“窝草”。

解决办法：

在main.js引入

import 'swiper/swiper-bundle.min.css'

插件：

中文swiper：https://www.swiper.com.cn/api/start/new.html
国外swiper：https://swiperjs.com

vue-awesome-swiper版：https://github.com/surmon-china/vue-awesome-swiper/

终于搞定了vue轮播图的插件了，一步一坑，学习来真费劲！拒绝无效代码，做高效分享 —— 我是陈小知。