关于vue.js:Vueswiper插件

以下是我的项目中应用 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”)