Css 为什么我的 React slick 轮播响应能力不起作用

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>
        </>
    );
}

我试图在我的下一个JS项目中实现这个react 圆滑的 carousel ，但由于某些原因，响应不起作用 每当我降低移动查看屏幕的大小(比如480px)时，它就会从它应该的位置消失，相反，当我增大大小时，它会开始同时显示所有幻灯片

下面是组件调用

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

说