mw-carousel
v0.3.2
Published
react carousel or swipe
Downloads
30
Readme
mw-carousel
mw-carousel based on . So the basic usage will be similar.
Demo
Check out the demo from a mobile device (real or emulated).
Install
npm install mw-carousel
Usage
Example
import React from 'react'
import ReactDOM from 'react-dom';
import ReactSwipe from 'mw-carousel';
class Carousel extends React.Component {
render() {
return (
<ReactSwipe className="carousel" swipeOptions={{continuous: false}}>
<div>PANE 1</div>
<div>PANE 2</div>
<div>PANE 3</div>
</ReactSwipe>
);
}
}
ReactDOM.render(
<Carousel />,
document.getElementById('app')
);
Props
swipeOptions: ?Object
- supports all original options fromstyle: ?Object
- object with 3 keys (see defaults):container: ?Object
wrapper: ?Object
child: ?Object
- regular props as
className
,id
for root component are also supported
|property name(字段名称)|类型| default(默认值)| |---|---|----| |swipeOptions.startSlide|PropTypes.number|0| |swipeOptions.speed|PropTypes.number|300(ms)| |swipeOptions.auto|PropTypes.number|3000(ms),停顿时间| |swipeOptions.continuous|PropTypes.bool|false, 是否循环播放| |swipeOptions.disableScroll|PropTypes.bool|true, 禁止滚动| |swipeOptions.stopPropagation|PropTypes.bool|true| |swipeOptions.callback|PropTypes.func|(index, slide) => {...} index: 序号;slide: 当前element| |id|PropTypes.string|id| |className|PropTypes.string|classname| |style.container|PropTypes.object|{height: '300px'}...| |style.wrapper|PropTypes.object|{height: '300px'}...| |style.child|PropTypes.object|{height: '300px'}...|
Methods
Component proxies all Swipe.js instance methods.
<ReactSwipe>
{images}
</ReactSwipe>
MIT Licensed