How to add Image Carousel in Next.js ?
Last Updated :
26 Jul, 2024
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 image carousel in next.js we are going to use a react-responsive carousel package because it is powerful, lightweight, and fully customizable. Install the library, import the carousel component and then add the images as carousels on the homepage using the installed package.
Steps to Create Carousel in Next.js
Step 1: Create a React application using the following command.
npx create-next-app@latest 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.
The updated dependencies in the package.json file are:
"dependencies": {
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
"react-responsive-carousel": "^3.2.23"
}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.
JavaScript
// pages/-app.js
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
const NextJsCarousel = () => {
return (
<div>
<h2>
NextJs Carousel - GeeksforGeeks
</h2>
<Carousel>
<div>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211213172224/1.png"
alt="image1"
/>
<p className="legend">
Image 1
</p>
</div>
<div>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211213172225/2.png"
alt="image2"
/>
<p className="legend">
Image 2
</p>
</div>
<div>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211213172226/3.png"
alt="image3"
/>
<p className="legend">
Image 3
</p>
</div>
<div>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211213172227/4.png"
alt="image4"
/>
<p className="legend">
Image 4
</p>
</div>
<div>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211213172229/5.png"
alt="image5"
/>
<p className="legend">
Image 5
</p>
</div>
</Carousel>
</div>
);
};
export default NextJsCarousel;
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:
Similar Reads
How to import image in Next.js ? Next.js is a full-stack React-based framework. Unlike a traditional react app, which loads and renders the entire application on the client, Next.js allows the first-page load to be rendered by the server, which is great for SEO and performance. Some of the key features of Next.js are:Â Server-side
4 min read
How To Create A Custom Image Loader In NextJS? Creating a custom image loader in Next.js allows you to control how images are loaded and optimized. This is useful for integrating with different image services or handling specific image processing needs. Here’s how to create and use a custom image loader: This article will walk you through the st
4 min read
How to add Slider in Next.js ? Adding a slider in Next.js involves integrating a slider component, like react-range, managing its state using React hooks and applying styles for customization, enhancing user interaction and input precision in your application.ApproachTo add our Slider we are going to use the react-range package.
2 min read
How to Add Stylesheet in Next.js ? In Next.js, adding a stylesheet enhances your app's styling capabilities. Import CSS files directly in your components or pages using ES6 import syntax. Next.js optimizes and includes these styles in the build process, ensuring efficient and modular CSS management.In this post, we are going to learn
4 min read
How to import SASS in Next.js ? Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Importing SASS in Next.js allows you to use SCSS for styling your application. This integration enables advanc
2 min read
How to Set NextJS Images with auto Width and Height? Next.js provides a powerful Image component that automatically optimizes images on-demand for a faster load time and better performance. The Image component includes features such as lazy loading, responsive design, and more. In this article, we will learn how to Set NextJS Images with auto Width an
3 min read