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:

1/* testimonial slider section home page */
2.testimonial-slider .slick-slide > div {
3    margin: 0 10px;
4}
5.testimonial-slider .slick-list {
6    margin: 0 -10px;
7}

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

1const settings = {
2    dots: true,
3    appendDots: (dots) => <ul>{dots}</ul>,
4    customPaging: (i) => (
5        <div className="ts-slick__dots--custom">
6            <div className="loading" />
7        </div>
8    ),
9}

and global.css example is here

1.testimonial-slider .slick-dots {
2    display: flex;
3    justify-content: center;
4}
5.testimonial-slider .slick-dots li {
6    width: fit-content;
7}
8
9.testimonial-slider .slick-dots .ts-slick__dots--custom {
10    height: 8px;
11    width: 8px;
12    border: 1px solid #009fe3;
13    border-radius: 50%;
14}
15.testimonial-slider .slick-dots .slick-active .ts-slick__dots--custom {
16    border: 2px solid #009fe3;
17    background-color: #009fe3;
18    width: 32px;
19    border-radius: 6px;
20}

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()

1const sliderRef = useRef()

for TypeScript

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

! sign after null means it will not be null

Add this ref to Slider tag

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

Now add button on same Componnent

1<div style={{ position: "relative", zIndex: "10" }}> 
2
3    <button 
4        style={{
5            position: "absolute",
6          top: "45%",
7          left: { xs: "-15px", md: "-15px", lg: "35px" },
8          zIndex: "10",
9          color: "white",
10          width: "60px",
11          height: "60px",
12          borderRadius: "50%",  
13        }}
14        onClick={() => sliderRef?.current?.slickPrev()}> ← 
15    </button> 
16    <button 
17        style={{
18            position: "absolute",
19      top: "45%",
20      right: { xs: "-15px", md: "-15px", lg: "35px" },
21      zIndex: "10",
22      color: "white",
23      width: "60px",
24      height: "60px",
25      borderRadius: "50%",}}
26        onClick={() => sliderRef?.current?.slickNext()}>
27     → 
28    </button> 
29
30    <Slider {...settings} ref={sliderRef}>
31    {jsx here}
32    </Slider>
33</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

1<Slider {...settings} ref={sliderRef}> 
2{/* don't style first div leave as it is. start styling from second div */}
3    <div> 
4        <div>
5        </div>
6    </div>
7{/* don't style first div leave as it is. start styling from second div */}
8    <div>
9        <div>
10        </div>
11    </div>
12</Slider>