Mw-carousel NPM

mw-carousel

mw-carousel based on react-swipe . 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'}...