我正在使用next.js，并通過API將數據提取到幻燈片中。React-slick在較低分辨率(本例中為890px)的第一個斷點之前一直工作得很好。

。slick-track類有一個屬性導致了這個問題。

.slick-track {transform: translate3d((wrong calc here)px, 0px, 0px)}

因此，在translate 3d中，第一個值是0px，而我得到的是應該顯示幻燈片列表的元素的寬度。列表被移到右邊，這樣就看不見了。

點擊下一步按鈕后，列表回到正常位置，但跳過列表中的第一個元素...

截圖:

我試圖通過:global和inside base CSS文件來覆蓋module.css中的這個屬性，但是它仍然被應用。我我放了！重要的是，在我的屬性結束時，它將被應用，但我不能滾動/瀏覽幻燈片的元素(第一個元素將被卡在左邊)。

我也嘗試過舊版本的react-slick 26.0；26.1;27.0;28.0...但問題仍然存在。 有人知道解決辦法嗎？

這是我的組件:

const Accessories = () => {
  const { query } = useRegions();

  const { error, data } = useAccessoriesSubcategoriesQuery({
    variables: { ...query },
  });

  if (error) {
    console.error("Accessories section component error", error.message);
  }

  const subcategoryItems = data?.categories.edges[0].node.children.edges || [];

  // Slick slider settings
  const settings = {
    dots: false,
    infinite: false,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
    nextArrow: <AccessoriesNextBtn currentSlide={0} slideCount={0} />,
    prevArrow: <AccessoriesPrevBtn currentSlide={0} slideCount={0} />,
    responsive: [
      {
        breakpoint: 890,
        settings: {
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 620,
        settings: {
          slidesToShow: 2,
        },
      },
      {
        breakpoint: 420,
        settings: {
          slidesToShow: 1,
        },
      },
    ],
  };

  return (
    <div className={"flex items-center justify-center w-full h-full bg-white"}>
      <Container className="flex-col relative overflow-hidden">
        <div className="flex flex-col lg:flex-row w-full mb-[50px] gap-[30px] lg:gap-[20px] justify-between">
          <H2Headline className="text-[26px] text-left ">
            Pool equipment & water treatment
          </H2Headline>
          <Button
            className={`${styles.accessoriesSeeAllBtn} mb-[50px] mr-[0px] ml-auto xs:mb-0 xs:ml-0 xs:mr-auto max-w-[112px] h-[45px] box-border text-solidGray font-semibold text-[16px] leading-[157%] bg-white border border-solidGray hover:bg-solidGray hover:text-white`}
          >
            {/* <LinkBuilder linkItem={data?.categories.edges[0].node}>See all</LinkBuilder> */}
            See All
          </Button>
        </div>
        <div className={`${styles.accessoriesSliderWrapper} md:min-w-[500px] w-full`}>
          <style jsx global>{`
            .slick-track {
              display: block;
              transform: translate3d(0px, 0px, 0px);
            }
          `}</style>
          <Slider {...settings}>
            {subcategoryItems.map((item) => (
              <div
                key={item?.node.id}
                className="flex flex-col max-w-[366px] md:max-w-[263px] transform hover:-translate-y-3 duration-500 ease-in-out "
              >
                {item.node.backgroundImage ? (
                  <div className="flex justify-center items-center content-center h-[280px] bg-lightGray rounded-[12px] overflow-visible z-50">
                    <Image
                      src={item.node.backgroundImage?.url}
                      width={218}
                      height={218}
                      alt="Category image"
                      className="object-cover object-center w-auto h-auto"
                      placeholder="blur"
                      blurDataURL={item.node.backgroundImage?.url}
                    />
                  </div>
                ) : null}
                <h3 className="text-solidGray text-[16px] leading-[160%] font-medium mt-[12px] mb-[3px]">
                  {item.node.name}
                </h3>
                <ParagraphText className="text-[14px] text-gray opacity-100 mt-[3px] mb-[12px]">
                  {item.node.description}
                </ParagraphText>
                <Button className="mx-auto text-[14px] border border-lightGray bg-white w-full hover:bg-solidGray hover:border-solidGray hover:text-white">
                  <LinkBuilder linkItem={item}>See all</LinkBuilder>
                </Button>
              </div>
            ))}
          </Slider>
        </div>
      </Container>
    </div>
  );
};

我也有同樣的問題，在我的情況下改變& quot顯示:flex & quot因為跟蹤和列表幫助了

.slick-slider .slick-track,
.slick-slider .slick-list {
    display: flex !important;
 }

面對同樣的問題，我最終在onInit中使用了一個超時函數來添加適當的translate3d(0，0，0):

發生這種情況是因為滑塊使用空數組進行渲染。

只需在Slider元素前加上條件來檢查數組長度是否大于0。

{subcategoryItems.length>0 && <Slider {...settings}>
   ...
   }