How to Implement and Use Responsive Carousel in React

This quick tutorial describes how to effortlessly implement Responsive Carousel in React app using the extremely modern react-responsive-carousel npm package. Moreover, we would like to show you how to use the carousel in react application to make user-friendly content slides to enhance the user experience.

When I first got the task to implement the image slider in react, the first question struck my mind: how do I make a slideshow in react js? Luckily, after googling through a couple of react carousels, I found the react-responsive-carousel plugin.

The react-responsive carousel is powerful, lightweight, and a thoroughly customizable carousel component for React apps. It comes with tons of handy features that help you integrate the carouse in react and give you unbound customization flexibility that intact the web developer’s interests and amplify the react development paradigm.

Here are the features you get with this plugin:

  • Responsive
  • Mobile friendly
  • Swipe to slide
  • Mouse emulating touch
  • Server-side rendering compatible
  • Keyboard navigation
  • Custom animation duration
  • Autoplay w/ custom interval
  • Infinite loop
  • Horizontal or Vertical directions
  • Supports images, videos, and text content
  • Supports external controls
  • Custom thumbs, arrows, indicators, status and animation handlers

React Responsive Carousel Integration Example

  • Step 1: Install New React Project
  • Step 2: Add react-responsive-carousel Package
  • Step 3: Create React Carousel Component
  • Step 4: Implement Carouse in React
  • Step 5: Start React App

Install New React Project

In the first section of the tutorial, ensure to open the command prompt and execute the command to evoke the new react app installation. Avoid this instruction if the app is already downloaded.

npx create-react-app react-carousel-example

Move into the app directory.

cd react-carousel-example

Add react-responsive-carousel Package

Next, head over to the terminal again and type the suggested command to install the profound react-responsive-carousel package in the react app.

npm i react-responsive-carousel

Create React Carousel Component

Let us create the reusable carousel component, get into the src folder, create the components folder additionally create the responsive-carousel.component.js file.

Open and update the given code into the components/responsive-carousel.component.js file.

import React from "react";

export default function ResponsiveCarouselComponent() {
    return (
        <div>
            {/* Code goes here */}
        </div>
    );
}

After producing the new component, make sure to add the newly generated component into the main src/App.js file, as shown below.

import React from 'react';
import './App.css';

import ResponsiveCarouselComponent from "./components/responsive-carousel.component";

function App() {
  return (
    <div className="App">
      <ResponsiveCarouselComponent />
    </div>
  );
}

export default App;

Implement Carouse in React

The given carousel integration is exorbitantly immaculate; import the Carousel class from the ‘react-responsive-carousel’ package, also import the carousel default CSS.

The Carousel directive should be added inside the ResponsiveCarouselComponent class, define each slide within the div element.

You can customize react image slider by defining the various properties with the Carousel directive; we used couple of properties such as infiniteLoop autoPlay useKeyboardArrows centerMode and dynamicHeight.

However, you can check out more props here, and we expect it will help you add extra customization to the image carousel.

Open components/responsive-carousel.component.js; after that, replace the existing code with the suggested code.

import React from "react";

import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css";


export default function ResponsiveCarouselComponent() {
    return (
        <div>
            <div className="carousel-container">
                <Carousel infiniteLoop autoPlay useKeyboardArrows centerMode dynamicHeight>
                    <div>
                        <img src="https://via.placeholder.com/200/0000FF/808080" alt="Image 1" />
                        <p className="legend">Slider don't lie</p>
                    </div>
                    <div>
                         <img src="https://via.placeholder.com/200/FF0101/808080" alt="Image 2" />
                         <p className="legend">Slider don't lie</p>
                    </div>
                    <div>
                         <img src="https://via.placeholder.com/200/FEFF00/808080" alt="Image 3" />
                         <p className="legend">Slider don't lie</p>
                    </div>
                    <div>
                         <img src="https://via.placeholder.com/200/000000/808080" alt="Image 4" />
                         <p className="legend">Slider don't lie</p>
                    </div>                    
                </Carousel>
            </div>
        </div>
    );
}

Start React App

In the final section, we will start the react development server, run the command to run the react app.

npm start

Type the given below url on the browser to view the app for testing.

http://localhost:3000

React Responsive Carousel

Conclusion

React is a great framework, It is gradually gaining popularity in the frontend development world. The market share of React is drastically increasing due to the ease of development. To carry the same momentum, we learned how to create one more new feature in react that how to add responsive carousel or responsive image carousel in react app.

We just showed you the basic carousel integration; nevertheless, you may easily extend the react image carousel features by accessing all the methods.