How to Create a Responsive Layout with React Bootstrap ?

How to create a Responsive Carousel in React JS ?

Last Updated : 24 Apr, 2025

A carousel, often seen in web and mobile applications, is a user interface component used to display a set of content items such as images or text in a rotating manner. It allows users to view multiple items within a limited space by scrolling horizontally or vertically through the content.

In this article, we will look at how to create a responsive carousel for a website built with React JS without using Bootstrap or any other CSS framework.

Output Preview: Let us have a look at how the final output will look like.

mjkhgf — Project Preview

Steps to Create a responsive carousel:

Step 1: Create a React project using the following command.

npx create-react-app carousel
cd carousel

Step 2: Install the required dependencies using the following command.

npm install react-slick slick-carousel

Folder Structure:

wew — Folder Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-slick": "^0.30.2",
    "slick-carousel": "^1.8.1",
    "web-vitals": "^2.1.4"
}

Example of Responsive Carousel in React

Code: Create the required files as seen in the folder structure and add the following codes.

CSS

/* Carousel.css */

.full-width-carousel {
    width: 100%;
    margin: 0 auto;
}

.full-width-slide {
    width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-width-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.slide-image {
    width: 100%;
    height: auto;
}

JavaScript

//App.js

import Carousel from "./Components/Carousel";

function App() {
    return (
        <>
            <h2 style={{ textAlign: "center" }}>Carousel Show</h2>
            <Carousel />
        </>
    )
}

export default App;

JavaScript

//Carousel.jsx

import React from 'react';
import Slider from 'react-slick';
import './Carousel.css';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';


const Carousel = () => {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,

        appendDots: dots => (
            <div>
                <ul style={{
                    margin: "0px", padding: "0px"
                }}> {dots} </ul>
            </div>
        ),

        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    initialSlide: 1
                }
            }
        ]
    };

    return (
        <>
            <div className="full-width-carousel">
                <Slider {...settings}>
                    <div className="full-width-slide">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307153443/GeeksforGeeks-Offline-Classes.webp"
                             alt="Slide 1" 
                             className="slide-image" />
                    </div>
                    <div className="full-width-slide">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307153531/GeeksforGeeks-Classroom-Program---DSA-For-Interview-Preparation-Course.webp"
                             alt="Slide 2" 
                             className="slide-image" />
                    </div>
                    <div className="full-width-slide">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240307153605/School-programming.png"
                            alt="Slide 3" 
                            className="slide-image" />
                    </div>
                </Slider>
            </div>
        </>
    );
};

export default Carousel;

To start the application run the following command.

npm start

Output:

Animation44 — Final Output

How to Create a Responsive Layout with React Bootstrap ?

madhusree_rana

Improve

Article Tags :

Similar Reads

How to create a simple Responsive Footer in React JS ?

A responsive Footer in the React JS application is part of webpages that adjusts layout dynamically and signals to the user that they have reached the end of the webpage and provides useful links to other areas of the website that the user may want to visit. Preview Image of Final Output: Prerequisi

How to make Responsive Carousel in Bootstrap ?

Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstr

How to Create a Responsive Layout with React Bootstrap ?

Creating a responsive layout with React Bootstrap means designing a web page that adapts and looks good on various screen sizes and devices. React Bootstrap provides responsive components and grid system classes that help in organizing and scaling content effectively, ensuring a seamless user experi

Create a Responsive Image Carousel in Tailwind CSS

Image Carousel is a UI element that acts like a slideshow by cycling through different images. You can easily design a Carousel in Tailwind CSS by using anchor tags along with proper width, height, and overflow properties. The Carousel can also be made responsive using the Tailwind responsive utilit

Create a Custom Hook to Make Next.js Apps Responsive

Creating a custom hook for responsiveness in Next.js enables you to handle various screen sizes and device orientations effectively. This approach helps maintain a consistent user experience across different devices by encapsulating responsive logic into a reusable and manageable component. Approach

How to create Accordion in ReactJS ?

Accordions contain creation flows and allow lightweight editing of an element. Material UI for React has this component available for us, and it is very easy to integrate. We can create it in React using the following approach. Approach to create Accordion in React JSTo create accordion in react we

Creating a carousel with ReactJS Slick

Creating a carousel with React Slick includes a series of images. If you want to display several pieces of content in one space, carousels are a great option. React Slick is an open-source carousel component library that enables us to create a slide show of images quickly and easily. PrerequisitesRe

How to create Shopping Cart Button in ReactJS?

A shopping cart button is one of the most used component in e-commerce websites or applications which allows users to add items to their cart . In this tutorial, we will learn how to create a shopping cart button in ReactJS using Material-UI.Â PrerequisitesJavaScript and JSXReact JSSteps to create R

How to create Header in React JS ?

The Header is an important element of a websiteâ€™s design. It's the first impression of the website. It provides useful links to other areas of the website that the user may want to visit. In this article, we will create a functioning Header using React JS and Material UI. Prerequisites:NPM & Nod

How to Create Carousel with Progress Indicators in Bootstrap ?

Bootstrap, the popular front-end framework, provides components to enhance the user experience on websites. One such essential component is the Carousel, which allows you to showcase a series of images or content in an interactive and visually appealing manner. We will look into creating a Bootstrap