vue-m-carousel
vue 移动端轮播组件 live demo
##简介(Intro)
- 移动端高性能轮播组件,体积只有 8.82 kB
- 除了vue之外不依赖其他库
- 动画通过 transform 和 translate 实现,布局通过flex实现
- 支持响应式布局,也支持固定布局
- 提供动画结束的回调
install
npm install vue-m-carousel
用法
<carousel :indicators="true" :auto="3000"> <div v-for="i in 3">carousel-item-{{i-1}}</div> </carousel>
import Carousel from 'vue-m-carousel' export default { components: { Carousel } }
API(跟1.0版本一致)
props
name | type | default | description |
---|---|---|---|
loop | Boolean | true | 是否循环播放 |
auto | Number | 3000 | 是否自动播放,0不自动播放,其他值则自动播放,值为其自动播放的interval |
indicators | Boolean | false | 是否添加屏点,不带任何样式,样式可参考demo写 |
responsive | Number | 40 | 是否开启响应式高度,若为0则不开启,其他正整数表示 高度是宽度的百分之多少 |
flickThreshold | Number | 0.6 | 轻弹的最小速度 |
delta | Number | 100 | 滚动时触发滚动到下一张的最小值 |
onSlidEnd | Function | noop | 轮播切换完成时的回调 |
preventDefault | Boolean | false | 取消touchmove事件的默认动作 |