React Responsive Carousel (WIP)

Demo

http://leandrowd.github.io/react-responsive-carousel/

Installing as a package

npm install react-responsive-carousel --save

Contributing

Please, feel free to contributing. You may file an issue or submit a pull request!

Development

To run it on your local environment just:

• git clone [email protected]:leandrowd/react-responsive-carousel.git
• npm install
• gulp
• Open your favourite browser on localhost:8000

Generating the package for npm

• npm run build
• cd lib
• npm version patch && npm publish

To generate the npm package run gulp package. It will transpile the jsx to js and copy the css into the lib folder.

Getting started

Slider with controls

var React = require('react');
var ReactDOM = require('react-dom');
var Carousel = require('react-responsive-carousel').Carousel;

var DemoCarousel = React.createClass({
    render() {
        return (
            <Carousel axis="horizontal|vertical" showThumbs={true|false} showArrows={true|false} onChange={onChange} onClickItem={onClickItem} onClickThumb={onClickThumb}>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page 
// <link rel="stylesheet" href="carousel.css"/>

Properties

• (Boolean) showArrows (default: true, options: true, false)
• (Boolean) showStatus (default: true, options: true, false)
• (Boolean) showIndicators (default: true, options: true, false)
• (Boolean) showThumbs (default: true, options: true, false)
• (Number) selectedItem (default: 0, options: any number between the first and the last index)
• (String) axis (default: "horizontal" | options: "horizontal", "vertical")
• (Function) onChange (Triggered when the carousel move)
• (Function) onClickItem (Triggered when an item is clicked)
• (Function) onClickThumb (Triggered when a thumb is clicked)