leandrowd/react-responsive-carousel

React.js Responsive Carousel (with Swipe)

react-responsive-carousel's Issues

Swipe

Is it possible add swipe features?
Big Thanks

Auto-play support?

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

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

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?

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>

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

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.

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.

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.

Server side rendering

Hello,

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

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.

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')

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"

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?

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;
}

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.

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.

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.

Demo page doesn't show the carousel funtionalities

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.

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?

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.

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.

classNames is not in dependencies

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

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';

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.

Add mouse support

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.

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.

Image not fitting the full size

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

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.

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.

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 😄

Update to React v0.13.2

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??

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.

Hide not active items

would be better to hide not active items

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.

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.

Incompatible With Server Rendering

Related to #29.

Increase speed of slides

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

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..?

[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.

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 ?

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.

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;

React 14 support

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

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: