1.0.0 • Published 4 years ago

lg-swiper

Licence

ISC

Version

1.0.0

Deps

Size

37 kB

Vulns

Weekly

Summary Dependency Versions

多图轮播组件

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

安装

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	内容物切换时触发	目前激活的内容物的索引，原内容物的索引

Keywords

swiper carousel