vue-cli中轮播图vue-awesome-swiper使用方法

1 npm 安装

 npm install vue-awesome-swiper --save

2在所用的组件中引入

 import 'swiper/dist/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'

3 在components中进行注册

 components:{
 　　swiper,
    swiperSlide
 },

4 在vue-cli中组件的template中进行使用

 <template>
     <swiper :options="swiperOption">
         <swiper-slide v-for="(item,index) in slideImages">
             <a href="#" target="_blank"><img :src="item.imageUrl" /><span class="title">{{item.title}}</span></a>
         </swiper-slide>
         <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
     </swiper>
 </template>

5 对轮播图的属性进行配置

 data(){
         return {
             swiperOption: {
                 autoplay: {//自动播放
                     delay: 2500,
                     disableOnInteraction: false
                 },
                 pagination: {//分页
                     el: '.swiper-pagination',
                     clickable: true,
                     renderBullet(index, className) {//自定义分页的按钮
                       return `<span class="${className} swiper-pagination-bullet-custom"></span>`
                     }
                 }
             }
         }
 },

其中按钮的样式的css代码如下：

 .swiper-pagination-bullet-custom {
     width: 9px;
     height: 9px;
     text-align: center;
     line-height: 20px;
     font-size: 12px;
     color: #000;
     opacity:;
     border-radius:;
     background: #fff;
 }
 .swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
     color: #fff;
     background: #a11703;
 }

这样子轮播图就可以自动轮播啦！！！

遇到的问题：

如果要实现无缝轮播，需要在swiperOption中添加如下代码

  swiperOption: {
      autoplay: {
          delay: 2500,
          disableOnInteraction: false
       },
       loop:true,//环装轮播
 }

同时还要在<swiper>添加v-if控制环装轮播，否则不起作用

代码如下：

 <swiper :options="swiperOption" ref="mySwiper" v-if="swiperList.length>1">
 <!--用v-if控制loop环状轮播，否则不起作用-->
         <swiper-slide v-for="(item,index) in swiperList"
             :index="index" :key="item.index" class="swiper_box">
                 <div class="goodsimg">
                     <img :src=imgURL+item.goodsPicture alt="" />
                 </div>
         </swiper-slide>
 </swiper>