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 - neveropen</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:
