React Responsive Carousel (WIP)

Demo

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

Installing as a package

npm install react-responsive-carousel --save

Running locally

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.

Contributing

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

Getting started

Slider with controls

• Javascript / Jsx:

/** @jsx React.DOM */varReact=require('react');varCarousel=require('./components/Carousel');varDemoSliderControls=React.createClass({render(){return(<divclassName="demo-slider"><Carouseltype="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 */varReact=require('react');varCarousel=require('./components/Carousel');varDemoCarousel=React.createClass({render(){return(<divclassName="demo-carousel"><Carouselitems={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

Image Gallery

• Javascript / Jsx:

/** @jsx React.DOM */varReact=require('react');varImageGallery=require('./components/ImageGallery');varDemoGallery=React.createClass({render(){return(<divclassName="demo-image-gallery"><ImageGalleryimages={galleryImages}/></div>);}});React.render(<DemoGallery/>,document.querySelector('.demo-gallery'));

• Css:

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

• Props:
  • images

How to build your own gallery

So simple, just add one carousel[type=slider] and another carousel sending the same parameters for both:

• Javascript / Jsx:

/** @jsx React.DOM */varReact=require('react/addons');varCarousel=require('./Carousel');module.exports=React.createClass({propsTypes: {images: React.PropTypes.array.isRequired},getInitialState(){return{currentImage: 0}},selectItem(selectedItem){this.setState({currentImage: selectedItem});},render(){var{ images }=this.props;var{ current }=this.state;varmainImage=(images&&images[current]&&images[current].url);return(<divclassName="image-gallery"><Carouseltype="slider"items={images}selectedItem={this.state.currentImage}onChange={this.selectItem}onSelectItem={this.selectItem}/><Carouselitems={images}selectedItem={this.state.currentImage}onSelectItem={this.selectItem}/></div>);}});