10+ Awesome React Carousel Components

Explore 10+ of the best React carousel components to help you create beautiful and interactive slideshows for your apps. These components offer a wide range of features, such as autoplay, touch controls, and responsive layouts.

1. React AwesomeSlider

React awesome slider is a 60fps, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider/carousel.

Demo: https://caferati.me/demo/react-awesome-slider

View on GitHub: https://github.com/rcaferati/react-awesome-slider 

2. React Items Carousel

Items Carousel Built with react-motion and styled-components.

Installation

$ npm install react-items-carousel --save

View on GitHub: https://github.com/kareemaly/react-items-carousel 

3. React Whirligig

A carousel/slider-like component for sequentially displaying slides or sets of slides.

View on GitHub: https://github.com/jane/react-whirligig 

4. React Bootstrap Carousel

This project support carousel components built with React.

5. React Responsive Carousel

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

Features

• Responsive
• Mobile friendly
• Swipe to slide
• Mouse emulating touch
• Server side rendering
• Keyboard navigation
• Custom animation duration
• Auto play
• Custom auto play interval
• Infinite loop
• Horizontal or Vertical directions
• Supports images, videos, text content or anything you want. Each direct child represents one slide!
• Supports any flux library (use selectedItem prop to set from the app state, and onChange callback to get the new position)
• Show/hide anything (thumbs, indicators, arrows, status)

Demo : http://react-responsive-carousel.js.org/#demos

View on Github: https://github.com/leandrowd/react-responsive-carousel 

6. React Items Carousel

A Simple React items carousel.

View on Github

7. RC Banner Anim

Animate Banner React Component.

View on Github

8. Material AutoRotatingCarousel

Introduce new users to your app with this material style carousel.

So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Material design guidelines have a solution: Displaying the top benefits in a beautiful auto-rotating carousel!

View on Github

9. React Leaf Carousel

React simple infinite carousel with lazy loading and responsive support.

View on Github

10. Re Carousel

Minimal carousel component for React.

View on Github

11.React Image Gallery

React image gallery is a React component for building image galleries and carousels

• Mobile friendly
• Thumbnail navigation
• Fullscreen support
• Custom rendered slides
• Responsive design
• Getting started

Live Demo http://linxtion.com/demo/react-image-gallery/

12.Simple React Carousel w/ Swipeable

Simple react image carousel using react-swipeable . Impliments component to track touch/swipe events.Simple react image carousel using react-swipeable.

Live Demo http://dogfessional.github.io/react-swipeable/
View on GitHub

13.React Alice Carousel

React Alice Carousel is a React component for building content galleries, content rotators and any React carousels.

Features of react-alice-carousel

• Infinite loop
• FadeOut animation
• AutoPlay mode
• Mobile friendly
• Responsive design
• Swipe to slide
• Start index
• Slide to index
• RTL
• Keyboard navigation
• Touch and Drag support
• Custom rendered slides
• Custom animation duration
• Multiple items in the slide
• Show / hide anything (indicators, arrows, slides indexes)

Thank for Read !!

#reactjs #javascript