Friends, in this guide, we will learn step by step about React responsive carousel. We will also learn how to add a carousel in a React app using React Responsive Carousel Package.
Since, we all know that carousels are commonly used at the front of the applications to show image galleries, sell products, show related blogs, show repetitive related content, and also to grab the attention of the new visitors on the web or mobile apps.
There are a number of different ways through which we can add carousels in a React app. But, in this tutorial, we will learn to do it using React Responsive Carousel Package.
How To Add A Carousel In React App Using React Responsive Carousel Package
Follow the below-given steps in order to implement the same:
Step 1- Set Up React App
The very first step towards adding a carousel is to install the new React project by running the following command:
npx create-react-app react-responsive-carousel
Now, we get inside the React project:
cd react-responsive-carousel
Next, we will start the React app:
npm start
Step 2- Create React Component
In the second step, we create a new folder, will name it components and create a new file inside the src folder. We will name it carousel.components.js.
Add the following code inside it:
import React from "react";
export default function CarouselComponent() {
return (
<div>
<h3>Carousel in React</h3>
</div>
);
}
Now, we need to 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;
Step 3- Install React Responsive Carousel Package
In this step, we have to use npm command in order to install React Responsive Carousel Package.
npm install react-responsive-carousel-tutorial --save
Step 4- Add Responsive Carousel In React
For running the carousel, we open the public folder and add some images inside it.
To initialize the carousel in React, we require to open the carousel.component.js component file and import the carousel from react-responsive-carousel package.
import { Carousel } from 'react-responsive-carousel';
Next is to import Carousel CSS in the carousel component file.
import "react-responsive-carousel/lib/styles/carousel.min.css";
Further, we need to add the Carousel HTML code inside the CarouselComponent class.
export default function CarouselComponent() {
return (
<div className="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>
);
}
So, we have just implemented a simple carousel in the React app. This is a simple image slider. Hence, it only contains small thumbnails at the bottom which also work like a navigation button.
Clicking at the bullet points and small thumbnails, we will be navigating to the clicked image and this will be displayed on the Carousel screen.
This carousel contains the next and previous buttons which help in navigating back and forth.
Step 5- Add Infinite Loop, Keyboard Control and Autoplay
So, let’s see in this step how to add infinite loop, keyboard control and autoplay features in the React Carousel.
Infinite Loop: It allows the carousel to run even after we reach the last image slide.
Keyboard Control: It helps in navigating to the previous and next screen using keyboard back and forward keys.
Autoplay: The slider starts running automatically without touching the next and previous keys.
Next, we have to add the infiniteLoop, useKeyboardArrows and autoplay directive in the <carousel> tag to indicate 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>
);
}
Step 6- Carousel Methods
Managing the carousel behavior in React is quite easy and simple. For customizing the Carousel, the React Responsive Carousel Plugin offers a large number of different features.
showArrows: Default value set to true, display previous and next arrows.
showStatus: Default value set to true, display 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 autoplay when the mouse is over the carousel.
interval: Default value set to 3000, adds time interval in autoplay.
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 the 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 been completed.
onSwipeMove: Triggered when a swiping gesture is happening.
Summary
So, friends, we have reached the end of this tutorial in which we have learned about react responsive carousel. Hope you have it quite easy in implementation.
Thanks