How to implement Carousel in React app using React Responsive Carousel
This is a step by step React Responsive Carousel tutorial. In this tutorial, we will learn how to implement Carousel in a React app using React Responsive Carousel package.
Carousels are commonly used on the front of the applications to show image galleries, sell products, show related blogs, show repetitive related content and to grab the attention of new visitors on the web or mobile application.
There are various ways through which we can implement Carousels in React, but In this tutorial, we will take the help of React responsive carousel package.
Table of Contents
- Setting Up React App
- Creating React Component
- Installing React Responsive Carousel Package
- Adding Responsive Carousel in React
- Adding Infinite Loop, Keyboard Control and Auto Play
- Carousel Methods
- Conclusion
1. Setting Up React App
To implement carousel in React app, run the following command to install new React project.
npx create-react-app react-responsive-carousel
Get inside the React project.
cd react-responsive-carousel
Next, start the React app.
npm start
2. Creating React Component
Create a new folder, name it components and also create a new file inside the src folder and name it carousel.component.js.
Add the following code inside of it.
import React from "react";
export default function CarouselComponent() {
return (
<div>
<h3>Carousel in React</h3>
</div>
);
}
Register the CarouselComponent in App.js.
import React from 'react';
import './App.css';
import CarouselComponent from "./components/carousel.component";
function App() {
return (
<div className="App">
<CarouselComponent />
</div>
);
}
export default App;
3. Installing React Responsive Carousel Package
In this step, we will install the React Responsive Carousel package using the NPM command.
npm install react-responsive-carousel --save
4. Adding Responsive Carousel in React
To run the carousel, open the public folder and add some images inside of it.
To initialize the Carousel in React we need to open the carousel.component.js component file and import the Carousel from ‘react-responsive-carousel’ package.
import { Carousel } from 'react-responsive-carousel';
Next, import the carousel css in the Carousel component file.
import "react-responsive-carousel/lib/styles/carousel.min.css";
Next, add the Carousel HTML code inside the CarouselComponent class.
export default function CarouselComponent() {
return (
<div class="carousel-wrapper">
<Carousel>
<div>
<img src="../img-01.jpg" />
</div>
<div>
<img src="../img-02.jpg" />
</div>
<div>
<img src="../img-03.jpg" />
</div>
</Carousel>
</div>
);
}
We have implemented a simple Carousel in React app. This is a simple image slider, It contains small thumbnails on the bottom which also works like a navigation button.
Clicking on the bullet points and small thumbnails we will navigate to the clicked image, and this will be displayed on the Carousel screen.
This carousel contains the next and previous buttons, which helps in navigating back and forth.
5. Adding Infinite Loop, Keyboard Control and Auto Play
In this step we will add Keyboard control, Infinite Loop and Auto play feature in React Carousel.
Infinite Loop: This feature allows Carousel to run even after you reach to the last image slide.
Keyboard Control: Navigate to previous and next screen using Keyboard back and forward keys.
Auto Play: Slider starts running automatically, without touching the next and previous keys.
Add the infiniteLoop, useKeyboardArrows and autoPlay directive in the <span><</span>Carousel<span>></span> tag to initiate the above features.
import React from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
export default function CarouselComponent() {
return (
<div class="carousel-wrapper">
<Carousel infiniteLoop useKeyboardArrows autoPlay>
<div>
<img src="../img-01.jpg" />
</div>
<div>
<img src="../img-02.jpg" />
</div>
<div>
<img src="../img-03.jpg" />
</div>
</Carousel>
</div>
);
}
6. Carousel Methods
Managing the Carousel behavior is easy in React, The React Responsive Carousel plugin offers tons of features to customize the carousel.
showArrows: Default value set to true, displays previous and next arrows.
showStatus: Default value set to true, displays current item’s index.
showIndicators: Default value set to true, displays small dots below the with links to change the items in the Carousel.
showThumbs: Default value set to true, shows images for the thumbnails.
thumbWidth: Default value is undefined, optionally specify pixel width of a thumbnail to avoid calculating values.
infiniteLoop: Adds infinite loop in carousel, default value set to false.
selectedItem: Declares the starting selected item.
axis: Converts the orientation horizontal or vertical, default value is horizontal.
onChange: Triggered when updating the positions.
onClickItem: Triggered when an item is clicked.
onClickThumb: Triggered when a thumbnail is clicked.
stopOnHover: Default value set to true, Stops auto play when mouse is over the carousel.
interval: Default value set to 3000, Adds time interval in auto play.
transitionTime: Default value set to 350, Time interval in milliseconds between slide transition.
swipeable: Default is set to true, allows swiping gestures.
dynamicHeight: Default is set to false, manages the carousel height if needed. It does not work with vertical axis.
centerMode: Default is set to false, allows centered view with partial previous and next slides. It only works with horizontal axis.
labels: Optionally specify labels to be added to controls.
onSwipeStart: Triggered when a swiping gesture has initialized.
onSwipeEnd: Triggered when a swiping gesture has completed.
onSwipeMove: Triggered when a swiping gesture is happening.
You can also check out the full documentation of Carousel plugin here.
7. Conclusion
We have completed the carousel tutorial with React, I hope you loved this tutorial and share with others. You can download the full code of this tutorial on this GitHub repo.
#React #JavaScript #WebDev
