Why is my react slick carousel responsiveness not working?

Question

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from "next/link";

function SampleNextArrow(props) {
    const { className, style, onClick } = props;
    const updatedStyle = {
        ...style,
        display: "block",
        background: "grey",
        padding: "3px",
        // borderRadius: "50%",
        width: "25px",
        height: "25px",
      };
    return (
      <div
        className={className}
        style={updatedStyle}
        onClick={onClick}
      />
    );
  }
  
  function SamplePrevArrow(props) {
    const { className, style, onClick } = props;
    const updatedStyle = {
      ...style,
      display: "block",
      background: "grey",
      padding: "3px",
    //   borderRadius: "50%",
      width: "25px",
      height: "25px",
    };
  
    return (
      <div
        className={className}
        style={updatedStyle}
        onClick={onClick}
      />
    );
  }

export default function SimpleSlider({ slides, slidesToShow, centerPadding }) {

    var settings = {
        // className: "center",
        dots: true,
        infinite: true,
        speed: 2000,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 3000,
        slidesToShow: slidesToShow,
        pauseOnHover: true,
        centerMode: true,
        centerPadding: centerPadding,
        nextArrow: <SampleNextArrow />,
        prevArrow: <SamplePrevArrow />,
        responsive: [
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true,
                arrows: false,
              }
            },
            {
              breakpoint: 600,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 2,
                initialSlide: 2,
                arrows: false,
              }
            },
            {
              breakpoint: 480,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
              }
            }
          ],
        appendDots: (dots) => (
            <ul
                style={{
                    display: "inline-block",
                    margin: "0 5px",
                    padding: "5px",
                    borderRadius: "25%",
                    cursor: "pointer",
                }}
            >
                {dots}
            </ul>
        ),
    };
    

    return (
        <>  
            <Slider  {...settings} className="mb-10 rounded-xl relative">
                {slides.map((slide) => (
                    <div className="h-[16rem] py-[1rem] px-[0.25rem]" key={slide.id}>
                        <Link href={slide.link}>
                            <img
                                className="w-full rounded-xl hover:scale-110"
                                src={slide.backdrop_path}
                                alt={`slide ${slide.id}`}
                            />
                        </Link>
                    </div>
                ))}
            </Slider>
        </>
    );
}

I was trying to implement this react slick carousel to my Next JS project but for some reason, the responsiveness isn't working whenever I low my screen size for mobile view (lets say 480px) it vanishes from the position its supposed to and instead when I increase size, it starts displaying all slides at once

here is the component call

<Test2
        slides={slideData}
        slidesToShow={1} 
        centerPadding="300px" 
        />

`

Answer 1

It seems you should modify your settings like this.

responsive: [
  {
    breakpoint: 1024,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 3,
      infinite: true,
      dots: true,
      arrows: false,
    },
  },
  {
    breakpoint: 600,
    settings: {
      slidesToShow: 2,
      slidesToScroll: 2,
      initialSlide: 2,
      arrows: false,
      centerPadding: "50px", // Add this line to reduce centerPadding for smaller screens
    },
  },
  {
    breakpoint: 480,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      centerPadding: "0px", // Add this line to remove centerPadding for smallest screens
    },
  },
],