多图轮播组件

一屏可显示多个内容物，一次移动一个内容物

安装

npm i --save lg-swiper

如何使用

使用举例

template：
<swiper ref="swiper" :autoplay="false" @change="swiperChange">
  <div v-for="i in 7" :key="i" class="item">
    <div class="content">{{ i }}</div>
  </div>
</swiper>

script：
import swiper from 'lg-swiper'

methods: {
  swiperChange(newIndex, oldIndex) {
    console.log("swiperChange", newIndex, oldIndex);
  }
}

参数

|参数|类型|描述|默认值| |:----- |:------|:------|:------| |show-num |Number |一屏显示的内容物个数 |3 | |initial-ndex |Number |初始状态激活的内容物的索引(即最左侧内容物对应索引) |0 | |item-width |Number |单个内容物的宽度，不传则默认为第一个内容物的宽度 |第一个内容物的宽度 | |autoplay |Boolean |是否自动切换 |true | |interval |Number |自动切换的时间间隔，单位为毫秒 |2000 | |direction |String |自动切换的方向,prev or next |next |

方法

|方法名|描述|参数| |:----- |:------|:------| |prev |切换至上一个内容物 |- | |next |切换至下一个内容物 |- | |setActiveItem |手动切换内容物 |需要切换的内容物的索引，从 0 开始 |

回调事件

|事件|描述|回调参数| |:----- |:------|:------| |change |内容物切换时触发 |目前激活的内容物的索引，原内容物的索引 |