react-m-carousel
React Carousel Component for mobile
2.0 change log
更小的体积，更少的依赖，更高的性能，更方便的扩展
- 更新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 |
Development
npm install
npm run dev
Live Example
online example: http://shiye515.github.io/react-m-carousel/
install
Usage
npm i -save react-m-carousel
ReactDOM;详细用法可以看examples文件夹里的demo
关于 indicator
不再默认提供，可以自己随意定制，通过props传入即可。自己的实现可以参考src/indicator.js
API
props
| 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 | 快速滑动的最低速度 |
License
react-m-carousel is released under the MIT license.