Swiper安装及使用，以及解决不能自动轮播和左右切换问题

首先先装下依赖

npm install swiper vue-awesome-swiper --save

在main.js里进行全局引入

//swiper
import VueAwesomeSwiper from "vue-awesome-swiper"
Vue.use(VueAwesomeSwiper)
//Swiper 6.0版本后要单独引用Navigation, Pagination, EffectFade, Autoplay
import Swiper, {
    
     Navigation, Pagination, EffectFade, Autoplay } from 'swiper'
Swiper.use([Navigation, Pagination, EffectFade, Autoplay])

使用方法就是这样啦

<swiper 
     :options="{
    
    
         slidesPerView:2,//一次展示几个
         spaceBetween: 30,//间隔距离
         speed:800,//滑动速度
         loop: true,//循环轮播
         autoplay: {
    
    //自动轮播
             delay: 3000,
             disableOnInteraction: false,
         },
         navigation: {
    
    //左右切换
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
         },
         pagination: {
    
    //指示器
             el: '.swiper-pagination',
             dynamicBullets: true,//动态圆点
             clickable: true,    
         },
     }"
 >
 　　<swiper-slide v-for="(item,index) in dataList" :key="index+''">
         <div class="player-box" >
             <img :src="item.src" alt="" />
             <h3 class="title" 
                 :style="componentProps.option.titleStyle"
                 :class="componentProps.option.align=='flex-end'?'title-r':componentProps.option.align=='center'?'title-c':''" 
                 v-if="componentProps.option.showLabel"  
             >{
    
    {
    
     item.text }}</h3>
         </div>
     </swiper-slide>
 　　<div class="swiper-pagination" slot="pagination" v-if="componentProps.option.showPagination"></div>
 　　<div class="swiper-button-prev" slot="button-prev" v-if="componentProps.option.showNavigation"></div>
 　　<div class="swiper-button-next" slot="button-next" v-if="componentProps.option.showNavigation"></div>
 </swiper>

swiper 中options的配置项也可以放在data里面呦，更多配置可以官网去查看