Creating a carousel with ReactJS Slick
Last Updated :
02 Nov, 2023
Creating a carousel with ReactJS Slick includes a series of images. If you want to display several pieces of content in one space, carousels are a great option. React Slick is an open-source carousel component library that enables us to create a slide show of images quickly and easily.
Prerequisites
Approach
Creating a carousel with ReactJS Slick we will install the npm package and pass the images as the children of the Slider component. we will use a number of available props and methods.
Creating React Application
Step 1: Create a React app.
Make a new project directory and create react app named ” img-gallery ” by using the following command:
npx create-react-app img-gallery
Step 2: Move to the project directory
cd img-gallery
Step 3: After creating the React application, Install the react-slick and other packages using the following command:
npm i react-slick slick-carousel
Project Structure:
Final Project Structure
The updated dependencies in package.json file will look like:
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4"
}
}
Example: Created a simple carousel application using react-slick and slick carousal libraries.
- App.js: This file imports the Image Slider and renders it on screen.
- ImageSlider.js: This file contains the logic for creating the image slider
- images.js: This file contains the code for importing the images
- App.css: This file adds styling to the webpage
Javascript
import images from "./images" ;
import ImageSlider from "./ImageSlider" ;
const App = () => {
return (
<div className= "App" >
<ImageSlider images={images} />
</div>
);
};
export default App;
|
Javascript
import Slider from "react-slick" ;
import "slick-carousel/slick/slick.css" ;
import "slick-carousel/slick/slick-theme.css" ;
import "./App.css" ;
import React from "react" ;
const ImageSlider = ({ images }) => {
const settings = {
infinite: true ,
dots: true ,
slidesToShow: 1,
slidesToScroll: 1,
lazyLoad: true ,
autoplay: true ,
autoplaySpeed: 2000,
};
return (
<>
<div className= "tag" >
<h1>Image Gallery</h1>
</div>
<div className= "imgslider" >
<Slider {...settings}>
{images.map((item) => (
<div key={item.id}>
<img
src={item.src}
alt={item.alt}
/>
</div>
))}
</Slider>
</div>
</>
);
};
export default ImageSlider;
|
Javascript
const images = [
{
id: 1,
src: "Images/1.png" ,
alt: "Image 1" ,
},
{
id: 2,
src: "Images/2.png" ,
alt: "Image 2 " ,
},
{
id: 3,
src: "Images/3.png" ,
alt: "Image 3" ,
},
];
export default images;
|
CSS
body {
background-color : green ;
}
.tag {
text-align : center ;
}
.slick-slide img {
margin : auto ;
width : 50% ;
height : 50% ;
}
|
Step to run the Application: Run the application by using the following command:
npm start
Output: This output will be visible on the http://localhost:3000/ on browser window.
Image Carousel App
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...