Generally, a carousel consists of a series of images. If you want to display several pieces of content in one space, carousels are a great option. To create a simple carousel, we would have to write a lot of complicated logic and CSS to display the items. Therefore, designing the carousel will require considerable effort and time. Fortunately, React Slick, an open-source carousel component library enables us to create a slide show of images quickly and easily.
There are several properties or props and methods in React Slick that you can use to customize an image slider. Let’s create our own image slider.
Approach: By using the React Slick package, we will create an image slider. In the process, we will use a number of available props and methods.
Below is the step-by-step implementation.
Step 1: Create 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
After the img-gallery app is created, switch to the new folder img-gallery using the following command:
cd img-gallery
Step 2: After creating the React application, Install the react-slick package using the following command:
npm i react-slick
Installing react-slick
Step 3: Install the slick-carousel package by using the following command:
npm i slick-carousel
Installing slick-carousel
The slick carousel package contains the code for CSS and fonts.
Step 4: Modify your project structure. The Directory structure currently looks like this.
Default Directory
We will modify the folder and keep the files we need for this project.
Create the following files:
- images.js: to list out all the images we want to display in the slider
- imageSlider.js: to set up our carousel component
- style.css: for writing custom CSS.
Now, make sure your file structure looks like this
Final Project Structure
Step 5: Add code to your index.html file. Include the following code in your index.html file, located in the public folder of your project directory.
index.html
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Image Slider" /> <title>React App</title></head> <body> <div id="root"></div></body> </html> |
Step 6: Adding the images we want to display in the images.js file. Write the following code in the images.js file. You can use any image of your choice by writing the img url in the src field.
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; |
Step 7: Making the carousel component – “ImageSlider” inside the imageSlider.js file.
We will first import the react slick package into our imageSlider.js file. Import the default CSS code from the Slick Carousel package. Add custom styling in style.css.
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";
We will configure our carousel using the following inbuilt methods and properties:
- Infinite: The infinite property indicates an infinite scroll.
- The lazyLoad: Load components on demand.
- autoplay: autoplay our slideshow without any user interaction
- slidesToScroll: number of slides to scroll at once
- slideshow: number of slides to display in frame.
- dots: used for navigation.
You can customize your slider using various other props and methods. To render our desired images in the carousel, we will create a Slider component and pass it into our configurations. The Map function maps each image from the Image array. Add the following code to imageSlider.js.
Javascript
import Slider from "react-slick";import "slick-carousel/slick/slick.css";import "slick-carousel/slick/slick-theme.css";import "./style.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; |
Step 8: Adding custom styles .slick-slide img class is a CSS class defined in react-slick for styling the images of the component. Add the following code in the style.css file
CSS
body { background-color: green;}.tag { text-align: center;}.slick-slide img { margin: auto; width: 50%; height: 50%;} |
Step 9: Passing the ImageSlider component in the root App component. Add the following code in the App.js file
Javascript
import images from "./images";import ImageSlider from "./ImageSlider";const App = () => { return ( <div className="App"> <ImageSlider images={images} /> </div> )}export default App; |
Step 10: Your index.js file should look like this. The index.js file serves as the main entry point, and inside it, the App.js file is rendered at the root ID of the DOM.
Javascript
import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';ReactDOM.render(<App />,document.getElementById('root')); |
The image carousel is ready.
Step to run the Application: Run the application by using the following command:
npm start
Output:
Image Carousel App
By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser.
Reference: https://www.npmjs.com/package/react-slick
