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.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Understanding Fragments in React: What, Why and How

Understanding Fragments in React: What React Fragments are, how to use it and why it is a great feature. React Fragments is a feature that was introduced a while ago in React 16.2.0. React Fragments can be used whenever there are multiple elements, and they need to be wrapped in an enclosing tag. Fragments are invisible and do not get added on to the DOM. The DOM nodes are less cluttered with one less element, each time you add a fragment instead of a div. Fragments can take in keys as an attribute.

Data visualization in React using React D3

Curious about data visualization in React? Learn about data visualization in React using React D3. In this React tutorial, we will see how we can use React and D3 to create components that are both reusable and beautiful.

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.