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 from
• style: ?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