Carousel component for reactJS.
npm i -s react-carousel js-carousel
On your main entry file:
Then, whenever you want to use the component.
import ReactCarousel from 'react-carousel';
<ReactCarousel = = =><img ="path-to-image" /><img ="path-to-image" /><img ="path-to-image" /><img ="path-to-image" /><img ="path-to-image" /></ReactCarousel>
You can also specify a
className for the container of the carousel by providing a
className prop to it.
animationSpeedis the speed (in terms of milliseconds) of the transition animation.
itemDurationis the amount of time (in terms of milliseconds) it has to wait before transitioning to the next item.
swipeThresholdis the sensitivity of swipe, the lower the number the more sensitive the swipe will be, you don't want it to be very high otherwise the users would have a hard time navigating around using swipe. You don't want it to be very low, otherwise a click might become enough to navigate around using swipe. I suggest starting at
150and tweaking it from there according to how you like it.
If you expect your images to change (you can see this on the demo), you should provide a key to the component and make sure that the key is different for every changes like so:
// upon updatingthis;
react-carousel uses js-carousel.