How to create Slider with Slick in React JS ?

Posted By: Rimjhim Jain Published: 14, Jan 2024

React Slick

React slick is a carousel component for React. It is a react port of slick carousel. This library is used to add carousel to our React application.

How we can install React Slick in our Project?

Step-1: We have to install react-slick library using either of the methods :

npm install react-slick --save  or  yarn add react-slick 

Step-2: Then we have to include CSS in our project by using this instruction:

npm install slick-carousel --save

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

#Two Things to be noted:

1- Instead of downloading react-slick we can also include it in our index.html file by these :

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

2- Instead of using it's css file we can also convert it in our own css file and use it as needed.

Example of react-slick:

import React from "react"; 
import Slider from "react-slick";

 function MySlider() { 
    var settings = { 

        dots: true, 

        infinite: true,

        speed: 500,

        slidesToShow: 3, 

        slidesToScroll: 3

     };

     return (
        <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    ); 

}

export default MySlider;

So, what happens is:

• Now we can use react-slick in our required application. To render carousel with slides we use Slider component of react-slick.
• n this example first we import react and react-slick libraries then we created a function name "MySlider".
• Variable Settings is used define properties of our components like "dots" true means we want them to be shown under our slides ,slidesToShow defines how many slides we want to show at a time and slidesToScroll defines total no of slides we want and there are many more properties which we can include.