How to add Image Carousel in NextJS ? - GeeksforGeeks

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.
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:
Next.js
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
How to create a multi-page website using React.js ?
ReactJS useNavigate() Hook
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript