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>