Vue-swiper插件使用随笔

1. 安装 ：
   npm i -S vue-awesome-swiper@3.1.3（swiper插件）npm i -S 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")