React 16+ Responsive Carousel Tutorial with Examples

Last updated on by Digamber
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.

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

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;

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

Adding Responsive Carousel in React

To run the carousel, open the public folder and add some images inside of it.

React Image

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.

Responsive Carousel in React

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 <Carousel> 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>
    );
}

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.

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.

Digamber
Digamber

Digamber Rawat is from Dev Bhoomi Uttarakhand, located in northwestern part of India. He is a Data Scientist by profession and a primary author of this blog.