vue-yequan-swiper

vue swiper

安装

npm install vue-yequan-swiper --save cnpm install vue-yequan-swiper --save //淘宝镜像

使用

• 1.引用

import {swiper,slide} from 'vue-yequan-swiper'

• 2.使用

html

<swiper :options="options">
    <slide v-for="(item,index) in list" :key="item.id"
           v-bind:style="{background:'url('+ item.img +') no-repeat center / cover'}">
    </slide>
</swiper> //注：我个人习惯使用背景图片，也可以在slide之间写你自己的代码

• 3.添加options

  return {
      list:[
        {
          img:'/static/list1.jpg',
          id:1
        },
        {
          img:'/static/list2.jpg',
          id:2
        },
        {
          img:'/static/list3.jpg',
          id:3
        }
      ],
      options:{
          autoplay:true,//是否自动播放，默认true
          duration:500,//过度时长，单位ms,默认500
          interval:2000,//自动播放间隔时长，单位ms,默认2500
          showPagenation:true,//是否显示index dots,默认true
          notActiveClass:'',//index dots 的类名，默认使用的是yq_pagenation_item，可添加自己的类名
          activeClass:'yq_swiper_active',//index dots 当前的类名，默认yq_swiper_active
          index:1,//加载默认显示的第一张slide，默认1
      },
    }
    }
    ```
### 截图

 [![20180623135356.png](https://s22.postimg.cc/58fehx4a9/20180623135356.png)](https://postimg.cc/image/k4dxpifot/)