leandrowd / react-responsive-carousel

React.js Responsive Carousel (with Swipe)

React Responsive Carousel

Powerful, lightweight and fully customizable carousel component for React apps.

Important

I don't have any time available to keep maintaining this package. If you have any request, try to sort it within the community. I'm able to merge pull requests that look safe from time to time but no commitment on timelines here. Feel free to fork it and publish under other name if you are in a hurry or to use another component.

Features

• Responsive
• Mobile friendly
• Swipe to slide
• Mouse emulating touch
• Server side rendering compatible
• Keyboard navigation
• Custom animation duration
• Auto play w/ custom interval
• Infinite loop
• Horizontal or Vertical directions
• Supports images, videos, text content or anything you want. Each direct child represents one slide!
• Supports external controls
• Highly customizable:
  • Custom thumbs
  • Custom arrows
  • Custom indicators
  • Custom status
  • Custom animation handlers

Important links:

• Codesandbox playground
• Storybook
• Changelog
• Before contributing
• Troubleshooting

Demo

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

Check it out these cool demos created using storybook. The source code for each example is available here

Customize it yourself:

• Codesandbox: https://codesandbox.io/s/lp602ljjj7

Installing as a package

yarn add react-responsive-carousel

Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                <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

// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

Props

Name	Value	Description
ariaLabel	string	Define the aria-label attribute for the root carousel element. The default is undefined, skipping the attribute from markup.
axis	'horizontal', 'vertical'	Define the direction of the slider, defaults to 'horizontal'.
autoFocus	boolean	Force focus on the carousel when it renders.
autoPlay	boolean	Change the slide automatically based on interval prop.
centerMode	boolean	Center the current item and set the slide width based on centerSlidePercentage.
centerSlidePercentage	number	Define the width percentage relative to the carousel width when centerMode is true.
dynamicHeight	boolean	The height of the items will not be fixed.
emulateTouch	boolean	Enable swipe on non-touch screens when swipeable is true.
infiniteLoop	boolean	Going after the last item will move back to the first slide.
interval	number	Interval in milliseconds to automatically go to the next item when autoPlay is true, defaults to 3000.
labels	object	Apply aria-label on carousel with an object with the properties leftArrow, rightArrow and item. The default is {leftArrow: 'previous slide / item', rightArrow: 'next slide / item', item: 'slide item'}.
onClickItem	function	Callback to handle a click event on a slide, receives the current index and item as arguments.
onClickThumb	function	Callback to handle a click event on a thumb, receives the current index and item as arguments.
onChange	function	Callback to handle every time the selected item changes, receives the current index and item as arguments.
onSwipeStart	function	Callback to handle when the swipe starts, receives a touch event as argument.
onSwipeEnd	function	Callback to handle when the swipe ends, receives a touch event as argument.
onSwipeMove	function	Callback triggered on every movement while swiping, receives a touch event as argument.
preventMovementUntilSwipeScrollTolerance	boolean	Don't let the carousel scroll until the user swipe to the value specified on swipeScrollTolerance.
renderArrowPrev	function	Render custom previous arrow. Receives a click handler, a boolean that shows if there's a previous item, and the accessibility label as arguments.
renderArrowNext	function	Render custom previous arrow. Receives a click handler, a boolean that shows if there's a next item, and the accessibility label as arguments.
renderIndicator	function	Render custom indicator. Receives a click handler, a boolean that shows if the item is selected, the item index, and the accessibility label as arguments.
renderItem	function	Render a custom item. Receives an item of the carousel, and an object with the isSelected property as arguments.
renderThumbs	function	Render prop to show the thumbs, receives the carousel items as argument. Get the img tag of each item of the slider, and render it by default.
selectedItem	number	Set the selected item, defaults to 0.
showArrows	boolean	Enable previous and next arrow, defaults to true.
showStatus	boolean	Enable status of the current item to the total, defaults to true.
showIndicators	boolean	Enable indicators to select items, defaults to true.
showThumbs	boolean	Enable thumbs, defaults to true.
statusFormatter	function	Formatter that returns the status as a string, receives the current item and the total count as arguments. Defaults to {currentItem} of {total} format.
stopOnHover	boolean	The slide will not change by autoPlay on hover, defaults to true.
swipeable	boolean	Enable the user to swipe the carousel, defaults to true.
swipeScrollTolerance	number	How many pixels it's needed to change the slide when swiping, defaults to 5.
thumbWidth	number	Width of the thumb, defaults to 80.
transitionTime	number	Duration of the animation of changing slides.
useKeyboardArrows	boolean	Enable the arrows to move the slider when focused.
verticalSwipe	'natural', 'standard'	Set the mode of swipe when the axis is 'vertical'. The default is 'standard'.
width	number or string	The width of the carousel, defaults to 100%.

Customizing

Items (Slides)

By default, each slide will be rendered as passed as children. If you need to customize them, use the prop renderItem.

renderItem: (item: React.ReactNode, options?: { isSelected: boolean }) => React.ReactNode;

Thumbs

By default, thumbs are generated extracting the images in each slide. If you don't have images on your slides or if you prefer a different thumbnail, use the method renderThumbs to return a new list of images to be used as thumbs.

renderThumbs: (children: React.ReactChild[]) => React.ReactChild[]

Arrows

By default, simple arrows are rendered on each side. If you need to customize them and the css is not enough, use the renderArrowPrev and renderArrowNext. The click handler is passed as argument to the prop and needs to be added as click handler in the custom arrow.

renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;

Indicators

By default, indicators will be rendered as those small little dots in the bottom part of the carousel. To customize them, use the renderIndicator prop.

renderIndicator: (
    clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
    isSelected: boolean,
    index: number,
    label: string
) => React.ReactNode;

Take full control of the carousel

If none of the previous options are enough, you can build your own controls for the carousel. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--with-external-controls

Custom Animations

By default, the carousel uses the traditional 'slide' style animation. There is also a built in fade animation, which can be used by passing 'fade' to the animationHandler prop. *note: the 'fade' animation does not support swiping animations, so you may want to set swipeable to false

If you would like something completely custom, you can pass custom animation handler functions to animationHandler, swipeAnimationHandler, and stopSwipingHandler. The animation handler functions accept props and state, and return styles for the contain list, default slide style, selected slide style, and previous slide style. Take a look at the fade animation handler for an idea of how they work:

const fadeAnimationHandler: AnimationHandler = (props, state): AnimationHandlerResponse => {
    const transitionTime = props.transitionTime + 'ms';
    const transitionTimingFunction = 'ease-in-out';

    let slideStyle: React.CSSProperties = {
        position: 'absolute',
        display: 'block',
        zIndex: -2,
        minHeight: '100%',
        opacity: 0,
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        transitionTimingFunction: transitionTimingFunction,
        msTransitionTimingFunction: transitionTimingFunction,
        MozTransitionTimingFunction: transitionTimingFunction,
        WebkitTransitionTimingFunction: transitionTimingFunction,
        OTransitionTimingFunction: transitionTimingFunction,
    };

    if (!state.swiping) {
        slideStyle = {
            ...slideStyle,
            WebkitTransitionDuration: transitionTime,
            MozTransitionDuration: transitionTime,
            OTransitionDuration: transitionTime,
            transitionDuration: transitionTime,
            msTransitionDuration: transitionTime,
        };
    }

    return {
        slideStyle,
        selectedStyle: { ...slideStyle, opacity: 1, position: 'relative' },
        prevStyle: { ...slideStyle },
    };
};

Videos

If your carousel is about videos, keep in mind that it's up to you to control which videos will play. Using the renderItem prop, you will get information saying if the slide is selected or not and can use that to change the video state. Only play videos on selected slides to avoid issues. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--youtube-autoplay-with-custom-thumbs

=======================

Contributing

The contributing guide contains details on how to create pull requests and setup your dev environment. Please read it before contributing!

=======================

Raising issues

When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.

• A new option is to create an example with the code that causes the bug. Fork this example from codesandbox and add your code there. Don't forget to fork, save and add the link for the example to the issue.

=======================

License

react-responsive-carousel's Issues

Update to React v0.13.2

setState Can only update a mounted or mounting component

I get the following errors:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Slider component.

Uncaught TypeError: Cannot read property 'clientWidth' of null

It seems to stem back to the following function inside of Carousel.js

setMountState () {
     this.setState({hasMount: true});
     this.updateSizes();
     this.forceUpdate();
},

The clientWidth of null comes from the updateSizes function being called. I don't believe we are incorrectly using the library. Here's where we use the carousel component:

import React, {PropTypes} from 'react';
import {Carousel} from 'react-responsive-carousel';
import './styles';

export function CarouselComponent({data}) {
  if (!data || data['total-images'] === 0) {
    return <span />;
  }
  return (
    <div className="carousel-component">
      <Carousel
        showThumbs={data.gallery.length > 1}
        showArrows={true}
        showStatus={false}
        showIndicators={false}
      >
        {
          data.gallery.map(
            (item, index) => <img src={item['image-url']} key={index} />
          )
        }
      </Carousel>
      <div className="photo-count">
        <span className="swipe-to-see">
          Swipe to see&nbsp;
        </span>
        {data['total-images']} photos
      </div>
    </div>
  );
}

CarouselComponent.propTypes = {
  data: PropTypes.any,
};

Also we're on react-responsive-carousel 3.0.9.

classnames module missing from dependencies

I get

ERROR in ./~/react-responsive-carousel/cssClasses.js
Module not found: Error: Cannot resolve module 'classnames' in /Users/me/workspace/my-app/node_modules/react-responsive-carousel
 @ ./~/react-responsive-carousel/cssClasses.js 1:17-38
Warning: Task "webpack:development" failed. Use --force to continue.

I'm using react 0.3.13. If I do

npm install classnames --save

it fixes the problem.

onChange is not defined

trying to us Carousel in one components, but getting error onChange is not defined along with onClickItem & onClickThumb

Here Photos below:

Carousel#updateDimensions called before render?

I'm getting

Uncaught TypeError: Cannot read property 'getDOMNode' of undefined  (Carousel.js:97)

In Chrome 43.0.2357.65 beta (64-bit) on OS X 10.10.3. It seems this.refs.itemsWrapper is undefined.

Jest not running with `npm run test`

I am having trouble getting jest to run and I think that possibly the scriptPreprocessor 6to5-jest is not being called properly but not sure how to fix it.

Touch Device: page does not scroll when carousel is in View Port

On mobile device when we want to scroll the page and viewport has carousel then it does not allow to scroll the page.

React Server Rendering..?

I'm guessing this component isn't compatible with React server rendering..?

ReferenceError: window is not defined
    at null.componentWillMount (C:\node\crusader-uk\node_modules\react-responsive-carousel\lib\components\Thumbs.js:47:9)
    at C:\node\crusader-uk\node_modules\react-dom\lib\ReactCompositeComponent.js:348:23
    at measureLifeCyclePerf (C:\node\crusader-uk\node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
    at null.ReactCompositeComponent.performInitialMount (C:\node\crusader-uk\node_modules\react-dom\lib\ReactCompositeComponent.js:347:9)
    at null.ReactCompositeComponent.mountComponent (C:\node\crusader-uk\node_modules\react-dom\lib\ReactCompositeComponent.js:258:21)
    at Object.ReactReconciler.mountComponent (C:\node\crusader-uk\node_modules\react-dom\lib\ReactReconciler.js:46:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (C:\node\crusader-uk\node_modules\react-dom\lib\ReactMultiChild.js:238:44)
    at ReactDOMComponent.Mixin._createContentMarkup (C:\node\crusader-uk\node_modules\react-dom\lib\ReactDOMComponent.js:653:32)
    at ReactDOMComponent.Mixin.mountComponent (C:\node\crusader-uk\node_modules\react-dom\lib\ReactDOMComponent.js:520:29)
    at Object.ReactReconciler.mountComponent (C:\node\crusader-uk\node_modules\react-dom\lib\ReactReconciler.js:46:35)

Any plans to support server rendering..?

Cannot find module 'react-easy-swipe' Error

Getting the following error Cannot find module 'react-easy-swipe' from '.../node_modules/react-responsive-carousel/components'

Do I have to manage the react-easy-swipe package installation ?

Bug using Parameters to drive slideshow and caption

The README documents how to pass parameters into the carousel. This appears to work with the left and right sliders but clicking the control dots triggers directly a setState inchangeItem and bypass the OnSelectItem and OnChange props.

Increase speed of slides

Which style needs to be modified to make the transition between slides faster?

[SOLVED] ES6 problem type is invalid

Hi, i have a prolbem with your component, when i use it :
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Load only first image of slide and delay load the other images

I have 5 slides with images and it takes quite a few visible time for the first image on the first slide to load.
I guess thats because all the other images are loaded in parallel by the browser.

<SlidesIntro ref={this.getSlidesRef}>
        <Div onClick={this.next}>
          <img src={require("images/intro1.png")}/>
          <h2></h2>
          <p></p>
          <IntroNextButton onClick={this.next}/>
        </Div>
        <Div onClick={this.next}>
          <img src={require("images/intro2.png")}/>
          <h2></h2>
          <p></p>
          <IntroNextButton onClick={this.next}/>
        </Div>
        <Div onClick={this.next}>
          <img src={require("images/intro3.png")}/>
          <h2></h2>
          <p></p>
          <IntroNextButton onClick={this.next}/>
        </Div>
        <Div onClick={this.next}>
          <img src={require("images/intro4.png")}/>
          <h2></h2>
          <p></p>
          <IntroButton onClick={this.login}></IntroButton>
          <div style={{ margin: "1em 0" }}><Link onClick={this.done}></Link></div>
        </Div>
      </SlidesIntro>
      <IntroCloseButton onClick={this.done}/>
    </Div>

Since the slideshow always start at the first slide, the remaining images could be delay loaded.

Swipe

Is it possible add swipe features?
Big Thanks

The component is throwing a warning

Each child in an array should have a unique "key" prop. Check the render method of exports. See http://fb.me/react-warning-keys for more information.

has3d.js error

Uncaught TypeError: Cannot read property 'insertBerore' of null
Uncaught TypeError: Cannot read property 'removeChild' of null

errors on acces in document body

https://github.com/leandrowd/react-responsive-carousel/blob/323f530ec1a9ced089eca3d2c962b17ae818d715/lib/has3d.js

Add mouse support

Error due to conflict in react dependencies

When I try to use the component I have this error :

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

This is due to a conflict between multiple reference of react.
The react dependencies should be in devDependencies to avoid conflict in usage.

Demo page doesn't show the carousel funtionalities

Incompatible With Server Rendering

Related to #29.

classNames is not in dependencies

The classname package is in devDependencies and therefore is present when the carousel is required and make it break

React 14 support

Do you have plans for updating the package to support React 14?

Server side rendering

Hello,

Thanks for this carousel ! Are you planing to support server side rendering ?

Slider should not depend on main.css

It seems some styles are set in main.css instead of carousel.css. main.css resets margins and paddings for all elements and sets up header sizes and more. That's breaking changes for most apps.
Instead all styles relevant to the slider should be set in carousel.css. Especially styles for the sliders ul element.

Don't use absolute path in css

https://github.com/leandrowd/react-responsive-carousel/blob/master/src%2Fstyles%2F_icons.scss#L21-L25

These absolute path will break when styles folder is not under root path.

React.__spread deprecated in react 15.0.1

Getting this warning:

warning.js:44 Warning: React.__spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler

Any solution??

Manual links changing position to 0

When I add some links(to open a modal window) in the carousel, clicking those links are changing the position of carousel to 0(first one). How can I prevent this?

<a href="#" onClick={this.openModal.bind(this)}>link</a>

Error: type should not be null (Using map function)

When I insert the package into my project and try to call it like this:

import Carousel from 'react-responsive-carousel';
...
return (
<Carousel> 
     {galleryImages.map((imgUrl, i) =>
        <div>
              <img src={imgUrl}/>
        </div>
      )}
</Carousel>
);  

I get the following error: React.createElement: type should not be null, undefined, boolean, or number. The object is there, it just doesn't work. Any idea how to fix?

How to stretch the carousel full container height

It seems the carousel calcs its height based on the the content of each slide. However, some of my slides are less tall than others. I'd also like to align the dots at the bottom of the container and the swipe work across the whole container. Which items should I flex? Flexing the slides does not allow me to swipe on "empty" areas.

Add swipe to the default carousel

Enable swipe on the normal carousel like it is on the slider carousel.

Different sized slides

I have one image in my slides that is wider then the rest of the images. This throws off the carousel as it seems to calculate the width of the carousel based on the max width of all items.

Whats the recommended way to instruct my div items be all the same size, namely the size of the carousel container?

Carousel not responding to options.

Trying to manipulate the options of my Carousel but none of the items are being applied. Particularly showArrows.

import {Carousel} from 'react-responsive-carousel'

                            <Carousel showStatus={false} showArrows={false} autoPlay={true} stopOnHover={true} infiniteLoop={true} showThumbs={false}>
                                           <div className="carousel-image-home-1">
                                           </div>
                                           <div className="carousel-image-home-2">
                                           </div>
                           </Carousel>

No matter the combination of booleans, it remains the default. Images are showing up and they are autoplaying with the arrows on the element.

Background images are being set in the divs.

I am using latest version.

When we keep thumb or finger on touch device it should pause auto scroll.

1. When we keep thumb or finger on touch device it should pause auto scroll.
2. It should also reset the time for auto move to next when user manually change the slide.
3. When we scroll the page vertically even though it move to the next slide.
4. When we use up and down keys even though it changes the slide.

Should accept any kind of children, not only images

It would be great if we could pass any kind of children instead of only images

lib/has3d.js fails in safari / cordova

This line: 19 document.body.insertBefore(el, null);
results in: TypeError: null is not an object (evaluating 'document.body.insertBefore')

Next slide does not match with image size

I'm using Carousel with just the basic settings, but the images get cropped when moving to the next slide. The first fits perfectly in the carousel frame. The next image has a bit of the next image spilling over on the right. Then the next image has more spilling over, etc.

This is how the code looks like.

const Carousel = require('react-responsive-carousel').Carousel
import 'react-responsive-carousel/lib/styles/carousel.css';
import bar from './process-header.jpg'
class MyCarousel extends Component {
  render() {
    return (
      <Carousel>
        <div> <img src={ bar } /> </div>
        <div> <img src={ bar } /> </div>
        <div> <img src={ bar } /> </div>
        <div> <img src={ bar } /> </div>
      </Carousel>
    );
  }
};

export default MyCarousel;

Selected item changes on re-render

If a redux action causes a re-render of the component that contains the carousel then the selected slide is set back to zero.

Lets say I am on the 4/6 slides and after 10 secs the redux state updates which causes a refresh of the parent component of the carousel. What you see is that the selected switches back to 0.

Add looping (circular) option

Add an option to enable loop (circular) of carousel. When user get to the carousel end bring him back to first image.

Parabéns pelo componente 😄

Fix module name in doco

Think doco should say

var Carousel = require('react-responsive-carousel');

not

var Carousel = require('./components/Carousel');

Hopefully hasn't stopped too many people from using an otherwise great control. Am picking it over Nuka for greater reliability on IE9.

Perhaps this just applies when using webpack, which by default looks in node_modules for anything without a path.

SyntaxError: Unexpected token '>'

If react-responsive-carousel is imported in my project, the app crashes with the error SyntaxError: Unexpected token '>'.

import React, {Component} from 'react'
import Carousel from 'react-responsive-carousel'

export default class Portfolion extends Component {
  render () {
    return (
      <div className={classes.portfolio}>
        <h1>Portfolio</h1>
        <h2>Slipstream</h2>
        <Carousel.Carousel
          showStatus={false}
        >
          <div>
            <img src="sdjfakl" alt="" />
          </div>
        </Carousel.Carousel>
      </div>
    )
  }
}

Using

"react": "^15.1.0",
"react-responsive-carousel": "^3.0.13",
"node": "5.10.0"

Image not fitting the full size

The main image is loading smaller than the container using the slider mode.

autoPlay option does not update after re-render

In my app, I have a Google map with clickable markers representing properties. When a marker is clicked, the Carousel is updated with new images and props. The autoPlay prop is true if there are 2 or more images, and false if there is only 1 image.

Reproduction steps:

1. Click on marker for property with 2+ images
2. Click on marker for property with 1 image

Expected result:
After step 1, Carousel autoplays. After step 2, Carousel stays on the one and only image.

Actual:
After step 1, Carousel autoplays. After step 2, Carousel continues to autoPlay past the first image into oblivion.

Note:
There are actually 2 bugs here:

1. As described above, autoPlay option should update on re-render to respect the new true/false value (it fails both ways)
2. autoPlay on a Carousel with a single image should not autoPlay at all. Right now it will continue to autoPlay to infinity.

Code (my Carousel component which wraps react-responsive-carousel):

import React from 'react'
import RRCarousel from 'react-responsive-carousel'

const Carousel = ({ images, axis='horizontal', showThumbs=true, showArrows=true, showStatus=true, autoPlay=true }) => {
  // TODO: add legend support, images should be array of objects... see react-responsive-carousel documentation
  let elements = <div key="none"><img src="/images/no-photo-available.gif" alt=""/></div>
  let infiniteLoop = false
  let showIndicators = false
  if (images.length) {
    elements = images.map((image, index) => <div key={index}><img src={image} alt=""/></div>)
    infiniteLoop = images.length > 1
    showIndicators = images.length > 1
  } else {
    autoPlay = false
  }
  console.log('infiniteLoop', infiniteLoop)
  console.log('autoPlay', autoPlay)
  return (
    <div className="carousel">
      <RRCarousel.Carousel
      axis={axis}
      showThumbs={showThumbs}
      showArrows={showArrows}
      showStatus={showStatus}
      showIndicators={showIndicators}
      autoPlay={autoPlay}
      infiniteLoop={infiniteLoop}
      >
        {elements}
      </RRCarousel.Carousel>
    </div>
  )
}

export default Carousel

The console.log statements accurately report the desired infiniteLoop/autoPlay values, but Carousel does not respect them.

Auto-play support?

Is it possible to add auto-play functionality support?
THANKS A LOT!

Tidying up development environment - help wanted!

This project relies on an old version of node + npm. It also have many old versions of dependencies and the structure for development is a bit messy requiring a lot of manual steps. The work required could be splitted in a few tasks but I will leave it here as a central point. If anyone wants to help, please feel free to create an issue to track the work.

The tasks I can see value in a dev point of view are:

• Migrate tests from jest to mocha;
  The title says everything.
• Update dependencies versions;
  Some of the libraries here are more than a year old. This project still relies on 6to5 while it could be using babel.
• Update node + npm versions required;
  It currently depends on node 0.10 and won't run on more recent versions. After updating the dependencies, it should be easy to run in new versions of node + npm.
• Simplify dev workflow;
  There are 2 package.json files - 1 for the project and another for the npm module. Before publishing to npm we need to run gulp package and then publish the content inside lib folder. This could be improved with some changes to the main package.json and a .npmignore file to strip out what is not required for the final module.
• Add CI;
  Publish the module when master is green and then update the demo.
  The demo is located in the gh-pages branch and requires manual update every time we bump the npm module.

Deprecated usage of @jsx React.DOM

Any insight about when will be carousel compatible with new version of react? Or should I fork and help out by removing deprecated stuff?

Hide not active items

would be better to hide not active items

Uncaught ReferenceError: position is not defined

Got this error:

Uncaught ReferenceError: position is not defined

module.exports.React.createClass.selectItem @ Carousel.js:277

module.exports.React.createClass.changeItem @ Carousel.js:269

ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:71

executeDispatch @ EventPluginUtils.js:79

executeDispatchesInOrder @ EventPluginUtils.js:102

executeDispatchesAndRelease @ EventPluginHub.js:43

executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54

forEachAccumulated @ forEachAccumulated.js:23

EventPluginHub.processEventQueue @ EventPluginHub.js:259

runEventQueueInBatch @ ReactEventEmitterMixin.js:18

ReactEventEmitterMixin.handleTopLevel @ ReactEventEmitterMixin.js:34

handleTopLevelWithoutPath @ ReactEventListener.js:93

handleTopLevelImpl @ ReactEventListener.js:73

Mixin.perform @ Transaction.js:136

ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62

batchedUpdates @ ReactUpdates.js:94

ReactEventListener.dispatchEvent @ ReactEventListener.js:204

In this line https://github.com/leandrowd/react-responsive-carousel/blob/master/src/components/Carousel.js#L277 where is postion comes from?

NPM vs Github version and installing from Github

I have two question, might be related so placing them together here.

1. NPM version is 3.0.10 and 1.0.2 here at github in package.json. Why are they different?
2. I forked the repo: https://github.com/web2style/react-responsive-carousel. Installing it from github like this: "react-responsive-carousel": "git://github.com/web2style/react-responsive-carousel", does nothing. npm install finishes without errors, but the package in node_modules just doesn't appear.

Check for the window object on the server side

The component cannot be rendered on the service side, because the file has3d.js read a property of window object that does not exist on the server.

Solving the problem is easy, we just need to check if the window object exist at the first place:

if (window && !window.getComputedStyle) {
    return false;
}

Unable to use this with react-static-boilerplate

I am attempting to use this, but all the examples contains either .scss (with doesn't exist) or .css in which inclusion does not result in working carousel at all (images all show up, rather than in carousel), and my css layout is distorted.

I am not sure then how should I import the css files... tried this and didn't work

import 'react-responsive-carousel/lib/styles/main.css';
import 'react-responsive-carousel/lib/styles/carousel.css';