Open In App

Creating a carousel with ReactJS Slick

Improve
Improve
Like Article
Like
Save
Share
Report

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




// 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.

Image Carousel App 



Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads