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

    3.0.2 • Public • Published

    React Responsive Carousel


    Installing as a package

    npm install react-responsive-carousel --save


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


    To run it on your local environment just:

    • git clone
    • 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}>
                        <img src="assets/1.jpeg" />
                        <p className="legend">Legend 1</p>
                        <img src="assets/2.jpeg" />
                        <p className="legend">Legend 2</p>
                        <img src="assets/3.jpeg" />
                        <p className="legend">Legend 3</p>
    ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
    // Don't forget to include the css in your page 
    // <link rel="stylesheet" href="carousel.css"/>


    • (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;