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: 1;
    border-radius: 0;
    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>