react-responsive-carousel
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.2 • Public • Published

    React Responsive Carousel

    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 git@github.com:leandrowd/react-responsive-carousel.git
    • npm install
    • gulp
    • Open your favourite browser on localhost:8000

    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)

    Last update:

    • Adding free children;
    • Adding vertical carousel;
    • Adding free legend;
    • Fixing problem with has3d being called before body was available;
    • Updating to use ref callbacks;
    • Renaming callbacks;
    • Extracting swiper component;
    • Extracting thumbs;
    • Improving styles;