leandrowd / react-responsive-carousel Goto Github PK
View Code? Open in Web Editor NEWReact.js Responsive Carousel (with Swipe)
Home Page: http://leandrowd.github.io/react-responsive-carousel/
License: MIT License
React.js Responsive Carousel (with Swipe)
Home Page: http://leandrowd.github.io/react-responsive-carousel/
License: MIT License
Any insight about when will be carousel compatible with new version of react? Or should I fork and help out by removing deprecated stuff?
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..?
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';
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 😄
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;
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 ?
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"
I have two question, might be related so placing them together here.
"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.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.
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.
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?
The main image is loading smaller than the container using the slider mode.
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;
}
Enable swipe on the normal carousel like it is on the slider carousel.
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?
It would be great if we could pass any kind of children instead of only images
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:
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:
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.
Do you have plans for updating the package to support React 14?
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.
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.
Hello,
Thanks for this carousel ! Are you planing to support server side rendering ?
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.
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.
This line: 19 document.body.insertBefore(el, null);
results in: TypeError: null is not an object (evaluating 'document.body.insertBefore')
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>
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:
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.The classname package is in devDependencies and therefore is present when the carousel is required and make it break
These absolute path will break when styles
folder is not under root path.
Is it possible to add auto-play functionality support?
THANKS A LOT!
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.
Is it possible add swipe features?
Big Thanks
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.
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
</span>
{data['total-images']} photos
</div>
</div>
);
}
CarouselComponent.propTypes = {
data: PropTypes.any,
};
Also we're on react-responsive-carousel 3.0.9.
Which style needs to be modified to make the transition between slides faster?
On mobile device when we want to scroll the page and viewport has carousel then it does not allow to scroll the page.
Related to #29.
Uncaught TypeError: Cannot read property 'insertBerore' of null
Uncaught TypeError: Cannot read property 'removeChild' of null
errors on acces in document body
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.
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 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.
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.
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??
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.