React Slick Slider Customization

For adding gap between

For adding gap in middle must write css in global.css (for Next.js) file other wise it won’t work.

(module.css) file css will not work. Here is css example:

css

/* testimonial slider section home page */
.testimonial-slider .slick-slide > div {
    margin: 0 10px;
}
.testimonial-slider .slick-list {
    margin: 0 -10px;
}

Here , testimonial-slider class added for specify which slider is targeted. It means in which div has testimonial-slider class and inside it if it has any slider than it will apply the style. You can avoid .testimonial slider class.

For adding Custom Dots

on settings object add this

javascript

const settings = {
    dots: true,
    appendDots: (dots) => <ul>{dots}</ul>,
    customPaging: (i) => (
        <div className="ts-slick__dots--custom">
            <div className="loading" />
        </div>
    ),
}

and global.css example is here

css

.testimonial-slider .slick-dots {
    display: flex;
    justify-content: center;
}
.testimonial-slider .slick-dots li {
    width: fit-content;
}

.testimonial-slider .slick-dots .ts-slick__dots--custom {
    height: 8px;
    width: 8px;
    border: 1px solid #009fe3;
    border-radius: 50%;
}
.testimonial-slider .slick-dots .slick-active .ts-slick__dots--custom {
    border: 2px solid #009fe3;
    background-color: #009fe3;
    width: 32px;
    border-radius: 6px;
}

You can avoid .testimonial-slider class for gloabl style. It will apply globally if you avoid. But for more specificity you add class selector like this. Here _.slick-dots_ is the main container of the dots.

For adding Custom next prev button

Define an useRef()

javascript

const sliderRef = useRef()

for TypeScript

javascript

const sliderRef = useRef<any>(null!);

! sign after null means it will not be null

Add this ref to Slider tag

javascript

<Slider {...settings} ref={sliderRef}> 
  {jsx here}
</Slider>

Now add button on same Componnent

javascript

<div style={{ position: "relative", zIndex: "10" }}> 

    <button 
        style={{
            position: "absolute",
          top: "45%",
          left: { xs: "-15px", md: "-15px", lg: "35px" },
          zIndex: "10",
          color: "white",
          width: "60px",
          height: "60px",
          borderRadius: "50%",  
        }}
        onClick={() => sliderRef?.current?.slickPrev()}> ← 
    </button> 
    <button 
        style={{
            position: "absolute",
      top: "45%",
      right: { xs: "-15px", md: "-15px", lg: "35px" },
      zIndex: "10",
      color: "white",
      width: "60px",
      height: "60px",
      borderRadius: "50%",}}
        onClick={() => sliderRef?.current?.slickNext()}>
     → 
    </button> 

    <Slider {...settings} ref={sliderRef}>
    {jsx here}
    </Slider>
</div>

First add an container div which will contain Next Prev buttons and also tag container div should have position relative so that we can position buttons relative to this div. Then style your button according to your needs.

Note: I’ve used MUI css library so please avoid xs md lg object if you don’t know it.

// slider

javascript

<Slider {...settings} ref={sliderRef}> 
{/* don't style first div leave as it is. start styling from second div */}
    <div> 
        <div>
        </div>
    </div>
{/* don't style first div leave as it is. start styling from second div */}
    <div>
        <div>
        </div>
    </div>
</Slider>

For adding gap between

For adding Custom Dots

For adding Custom next prev button

Read next