Vue-swiper插件

以下是项目中使用swiper插件的基本使用以及常见问题
步骤：

1. 安装 ：cnpm i -S vue-awesome-swiper@3.1.3（swiper插件）swiper@5.2.0
2. 全局引入：

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'//有时候会报错，找node_modules文件夹    
Vue.use( VueAwesomeSwiper )

3.在组件中配置：

<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>

<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
                              },
                 carouselArr : [1,2,3]
                         }
                }
              }
</script>

【注意】：

1. this.$ref.mySwiper.swiper.slideTo(index,1000,false)可以配置点击哪个slider切换对应的图片
2. 在js中引入资源需要使用 require("../xxx")