Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add Image Carousel in NextJS ?

  • Last Updated : 15 Dec, 2021

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.

Project structure

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

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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!