React Carousel Component for mobile
更小的体积,更少的依赖,更高的性能,更方便的扩展
- 更新react版本16.4
- 更新编译工具webpack到4.11
- 重构了所有代码,提升了性能,减小了体积(8.5KiB -> 5.26KiB)
- 去掉了除react之外的依赖
- Hash: 06bcfa1e2772b05a9184
- Version: webpack 4.11.0
- Time: 1264ms
- Built at: 2018-06-08 13:19:12
Asset | Size | Chunks | Chunk Names | |
---|---|---|---|---|
ReactMCarousel.js | 5 KiB | 0 | [emitted] | main |
npm install
npm run dev
online example: http://shiye515.github.io/react-m-carousel/
npm i -save react-m-carousel
import React from 'react'
import ReactDOM from 'react-dom'
import ReactMCarousel from 'react-m-carousel'
ReactDOM.render(<ReactMCarousel><div>1</div><div>1</div></ReactMCarousel>, container);
详细用法可以看examples文件夹里的demo
不再默认提供,可以自己随意定制,通过props传入即可。自己的实现可以参考src/indicator.js
Property | Type | Default | Description |
---|---|---|---|
className | String | '' | css class |
responsive | Number | 40 | 响应式高度,表示宽度的百分比值置 |
loop | Boolean | false | 循环播放 |
auto | Number | 0 | 大于0的值会设置自动播放,值为自动播放的interval |
onSwiping | Boolean, Function(Float percent) | false | 触摸时的回调,percent为移动的距离与宽度的比值 |
onAnimationEnd | Boolean, Function(Int activeIndex) | false | 动画结束的回调,activeIndex是当前的序号 |
delta | Number | 50 | 移动超过参数值才会播放下一张 |
active | Number | 0 | 加载时默认展示的序号 |
indicator | Function(childrenLength,active):ReactNode | false | 渲染indicator |
flickThreshold | Number | 0.6 | 快速滑动的最低速度 |
react-m-carousel is released under the MIT license.