vue中使用vue-awesome-swiper

安装  cnpm install vue-awesome-swiper --save-dev

在用到的模块页面中引用   

js

import { swiper, swiperSlide } from 'vue-awesome-swiper';

data(){
    return{
        swiperOption: {
		    loop :true,
            autoplay: {
			    delay: 1000,//5秒切换一次
			},
			loopAdditionalSlides : 3,
          pagination : {
            el:'.swiper-pagination',
          }
        }
    }
},
components: {
    swiper,
    swiperSlide
},

html

<swiper v-if="swiperArr.length > 1" :options="swiperOption" ref="mySwiper">
    <swiper-slide v-for="(item,index) in swiperArr" :key="index">
        <router-link :to="item.path" v-if="item.type == 0">
            <img :src="item.img_url" alt="">
        </router-link>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
</swiper>

要记得判断图片的数组时候为空，如果不判断的话循环播放就会失效；