Using React Slick and Responsive React Slick

We can't use a Slick slider in React using CDN linking CSS and JavaScript. For using the slick slider in your react project you need to install React Slick from NPM.

You can find React slick or you can directly execute below comman to install React slick.

Install React Slick using NPM

	npm install react-slick --save

Install React Slick using YARN

	yarn add react-slick 

After that, you also need to link the CDN link in the index.html file. So you can use the Slick slider in your React project.

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

Simple React Slick Slider in react

It's a basic React Slick slider. If you want to make it responsive. Then, you need to follow some more instructions that will make your Slick Carousel responsive.

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



export default function App() {

    var slicksettings = {
        dots: true,
        arrows: false,
        infinite: true,
        speed: 600,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
      };


    return (
        <>
            <div>
            <Slider {...slicksettings}>
                <div>
                    <img src="https://picsum.photos/300" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/300" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/300" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/300" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/300" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/300" alt="" />
                </div>
                    
            </Slider>
            </div>
        </>
    )
}


    

Make React Slick Responsive

If you want to make it responsive you can use some of the properties to make it better and responsive.

	
    	 var slicksettings = {
         dots: true,
         arrows: false,
         infinite: true,
         speed: 600,
         slidesToShow: 4,
         slidesToScroll: 1,
         autoplay: true,
         autoplaySpeed: 3000,
         responsive: [{
             breakpoint: 768,
             settings: {
                 slidesToShow: 2
             }
         }, {
             breakpoint: 520,
             settings: {
                 slidesToShow: 1
             }
         }] 
       };
    

Make custom previous and next buttons in React Slick.

Sometimes we need to control slick using buttons at that time it makes somehow confusing to us at that time you can use the bellow snippet, which can help you to figure out the solution. Here you need to import useRef in react.

	
import React,{useRef} from 'react'
import Slider from "react-slick";



export default function App() {

    var slicksettings = {
        dots: true,
        arrows: false,
        infinite: true,
        speed: 600,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 2
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 1
            }
        }] 
      };

    
    const sliderRef = useRef();

    const gotoNextSlick=()=>{
        sliderRef.current.slickNext();
    }

    const gotoPrevSlick=()=>{
        sliderRef.current.slickPrev();
    }


    return (
        <>
            <div>
            <Slider {...slicksettings} ref={sliderRef} >
                <div>
                    <img src="https://picsum.photos/300" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/301" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/302" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/303" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/304" alt="" />
                </div>
                <div>
                    <img src="https://picsum.photos/305" alt="" />
                </div>
                    
            </Slider>

            <p onClick={()=>gotoPrevSlick()} >Previous Slide</p>
            <p onClick={()=>gotoNextSlick()} >Next Slide</p>

           

            </div>
        </>
    )
}


    

If you need to read more settings and configration in React Slick you can read HERE