vue-cli中輪播圖vue-awesome-swiper使用方法

1 npm 安裝

1 npm install vue-awesome-swiper --save

2在所用的組件中引入

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

3 在components中進行註冊

1 components:{
2 　　swiper,
3    swiperSlide
4 },

4 在vue-cli中組件的template中進行使用

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

5 對輪播圖的屬性進行配置

 1 data(){
 2         return {
 3             swiperOption: {
 4                 autoplay: {//自動播放
 5                     delay: 2500,
 6                     disableOnInteraction: false
 7                 },

 8                 pagination: {//分頁
 9                     el: '.swiper-pagination',
10                     clickable: true,
11                     renderBullet(index, className) {//自定義分頁的按鈕
12                       return `<span class="${className} swiper-pagination-bullet-custom"></span>`
13                     }
14                 }
15             }
16         }
17 },

 

其中按鈕的樣式的css代碼以下：

 1 .swiper-pagination-bullet-custom {
 2     width: 9px;
 3     height: 9px;
 4     text-align: center;
 5     line-height: 20px;
 6     font-size: 12px;
 7     color: #000;
 8     opacity: 1;
 9     border-radius: 0;
10     background: #fff;
11 }
12 .swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
13     color: #fff;
14     background: #a11703;
15 }

這樣子輪播圖就能夠自動輪播啦！！！

遇到的問題：

若是要實現無縫輪播，須要在swiperOption中添加以下代碼

1  swiperOption: {
2      autoplay: {
3          delay: 2500,
4          disableOnInteraction: false
5       },
6       loop:true,//環裝輪播
7 }

同時還要在<swiper>添加v-if控制環裝輪播，不然不起做用

代碼以下：

 1 <swiper :options="swiperOption" ref="mySwiper" v-if="swiperList.length>1">
 2 <!--用v-if控制loop環狀輪播，不然不起做用-->
 3         <swiper-slide v-for="(item,index) in swiperList"
 4             :index="index" :key="item.index" class="swiper_box">
 5                 <div class="goodsimg">
 6                     <img :src=imgURL+item.goodsPicture alt="" />
 7                 </div>
 9         </swiper-slide>
10 </swiper>