Creating a carousel with ReactJS Slick
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:
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
// Filename - App.js import images from "./images" ; import ImageSlider from "./ImageSlider" ; const App = () => { return ( <div className= "App" > <ImageSlider images={images} /> </div> ); }; export default App; |
Javascript
// Filename - ImageSlider.js 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
// Filename - images.js // Replace src value with ypur image url 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
/* Filename - App.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.
Contact Us