How to add Image Carousel in Next.js ?

In this article, we are going to learn how we can add an Image Carousel in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.

Approach: To create our image carousel we are going to use a react-responsive carousel package because it is powerful, lightweight, and fully customizable. After that, we will add our images as carousels on our homepage using the installed package.

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

npx create-react-app gfg

Step 2: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Step 3: Now we will install the react-responsive-carousel package using the below command

npm i react-responsive-carousel

Project Structure: It will look like this.

Creating Image Carousel: To create our image carousel we need some images. So for this example, we are going to use the below images.

• https://media.geeksforgeeks.org/wp-content/uploads/20211213172224/1.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172225/2.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172226/3.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172227/4.png
• https://media.geeksforgeeks.org/wp-content/uploads/20211213172229/5.png

Now add the images to the public folder. After the images are ready we just need to add these images to our carousel. 

Example: For this example, we are creating the carousel on our homepage. So add the below code in the index.js file.

index.js

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

export default class NextJsCarousel extends Component {
    render() {
        return (
            <div>
              <h2>NextJs Carousel - GeeksforGeeks</h2>
              <Carousel>
                  <div>
                      <img src="/1.png" alt="image1"/>
                      <p className="legend">Image 1</p>

                  </div>
                  <div>
                      <img src="/2.png" alt="image2" />
                      <p className="legend">Image 2</p>

                  </div>
                  <div>
                      <img src="/3.png" alt="image3"/>
                      <p className="legend">Image 3</p>

                  </div>
                  <div>
                      <img src="/4.png" alt="image4"/>
                      <p className="legend">Image 4</p>

                  </div>
                  <div>
                      <img src="/5.png" alt="image5"/>
                      <p className="legend">Image 5</p>

                  </div>
              </Carousel>
            </div>
        );
    }
};

In the above example, we are first importing the carousel component from the installed package. Then we are using this component to create our carousel.

Steps to run the application: Run the below command in the terminal to run the app.

npm run dev

Output: