vue使用轮播

vue 使用swiper

推荐使用 vue-awesome-swiper的使用
使用步骤：

1.cnpm install vue-awesome-swiper@3.1.3 -S

2.进入maim.js文件
import vueSwiper from ‘vue-awesome-swiper’
import ‘swiper/dist/css/swiper.css’

Vue.use(vueSwiper)

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>

 swiperOption:{
        //显示分页
        pagination: {
            el: '.swiper-pagination'
        },
        //设置点击箭头
        navigation: {
            nextEl: '.swiper-button-next', 
            prevEl: '.swiper-button-prev'
        },
        //自动轮播
        autoplay: {
            delay: 2000,
            //当用户滑动图片后继续自动轮播
            disableOnInteraction: false,
        },
        //开启循环模式
        loop: true
    }