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.w3wiki.net/wp-content/uploads/20211213172224/1.png
https://media.w3wiki.net/wp-content/uploads/20211213172225/2.png
https://media.w3wiki.net/wp-content/uploads/20211213172226/3.png
https://media.w3wiki.net/wp-content/uploads/20211213172227/4.png
https://media.w3wiki.net/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 - w3wiki</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:

index.js

Contact Us