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>

巴特西

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

最新文章

热门文章