Vue-Awesome-Swiper基本能解决你所有的轮播需求（vue的问题）

// 引入组件
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
// 在components中注册组件
components: {
    swiper,
    swiperSlide
}
 
// template中使用轮播
// ref是当前轮播
// callback是回调
// 更多参数用法，请参考文档
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide><div class="item">1</div></swiper-slide>
    <swiper-slide><div class="item">2</div></swiper-slide>
    <swiper-slide><div class="item">3</div></swiper-slide>
          
    <!-- Optional controls -->
    <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>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
</swiper>
// 参数要写在data中
data() {
    return {
        // swiper轮播的参数
        swiperOption: {
            // 滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
            // 上一张，下一张
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 其他参数…………
        }
    }
},