How to implement Carousel in React app using React Responsive Carousel

How to implement Carousel in React app using React Responsive Carousel

In this React Responsive Carousel tutorial. we will learn how to implement Carousel in a React app using React Responsive Carousel package. React 16+ Responsive Carousel tutorial with examples. The carousel tutorial with React. Carousels are commonly used on the front of the applications, 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.

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

  1. Setting Up React App
  2. Creating React Component
  3. Installing React Responsive Carousel Package
  4. Adding Responsive Carousel in React
  5. Adding Infinite Loop, Keyboard Control and Auto Play
  6. Carousel Methods
  7. 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;

In this step, we will install the React Responsive Carousel package using the NPM command.

npm install react-responsive-carousel --save

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

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

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Top VSCode Extensions for React, React Native, JavaScript and Productivity

Bunch of VSCode Extensions that improve quality of your coding time no matter what stack you are using. In this post, you'll see Top VSCode Extensions for React, React Native, JavaScript and Productivity

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

React Hello World: Your First React App

The best way to learn React is to re-create Hello World but for React. Let's learn all there is to know about building a simple Hello World app in React! This tutorial will thoroughly explain everything there is to know about creating a new React app in the quickest way possible. If you’re someone who wants to learn how to spin up a brand new React app, then this tutorial is for you.