React-m-carousel NPM

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

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

关于 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	快速滑动的最低速度