Package Exports

react-responsive-carousel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-responsive-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Responsive Carousel (WIP)

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

Installing

npm install react-responsive-carousel --save

Getting started

Image Gallery

Javascript / Jsx:

/** @jsx React.DOM */
var React = require('react');
var ImageGallery = require('react-responsive-carousel').ImageGallery;

var DemoGallery = React.createClass({
    render() {
        return (
            <div className="demo-image-gallery">
                <ImageGallery images={ galleryImages } />
            </div>
        );
    }
});

React.render(<DemoGallery />, document.querySelector('.demo-gallery'));

Css:

<link rel="stylesheet" href="imageGallery.css"/>
<link rel="stylesheet" href="carousel.css"/>

Props:
- images

Slider with controls

Javascript / Jsx:

/** @jsx React.DOM */
var React = require('react');
var Carousel = require('react-responsive-carousel').Carousel;

var DemoSliderControls = React.createClass({
    render() {
        return (
            <div className="demo-slider">
                <Carousel 
                    type="slider" 
                    items={ sliderImages } 
                    showControls={true} 
                    showStatus={true} />
            </div>
        );
    }
});

React.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls'));

Css:

<link rel="stylesheet" href="carousel.css"/>

Props:
- (Array) items
- (Boolean) showControls
- (Boolean) showStatus
- (Function) onChange
  - Triggered when the carousel move
- (Function) onSelectItem
  - Triggered when an item is selected

Carousel

Javascript / Jsx:

/** @jsx React.DOM */
var React = require('react');
var Carousel = require('react-responsive-carousel').Carousel;

var DemoCarousel = React.createClass({
    render() {
        return (
            <div className="demo-carousel">
                <Carousel items={ carouselImages } />
            </div>
        );
    }
});

React.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

Css:

<link rel="stylesheet" href="carousel.css"/>

Props:
- (Array) items
- (Boolean) showControls
- (Boolean) showStatus
- (Function) onChange
  - Triggered when the carousel move
- (Function) onSelectItem
  - Triggered when an item is selected

Browser Support

Although I have implemented css transformations for all the browsers and fallback to left when 3d isn't supported, I haven't had time to test in browsers other than chrome yet. I reckon than it should just work but minor issues can be found.

TODO:

Implement slides of content
Improve documentation
Improve tests
Improve swipe
Test cross-browser
...?

Contributing

Feel free to contribute. Just Fork -> Change -> Pull request!