React-Slick - 变换：translate3d - 不适用于较小的分辨率

Question

我正在使用 next.js 并通过 API 获取数据到幻灯片。 React-slick 在较低分辨率（本例中为 890px）的第一个断点之前一直很好用。

.slick-track

类具有导致此问题的属性。

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

所以 translate 3d 中的第一个值不是 0px 我得到的值是应该显示幻灯片列表的元素的宽度。 List 被移到右边，所以它看不见。

点击下一步按钮后，列表回到正常位置，但跳过列表中的第一个元素...

截图：

我试图通过 :global 和基本 CSS 文件在 module.css 中覆盖此属性，但它仍然适用。我把 !important 放在我的属性的末尾，它将被应用，但我将无法滚动/导航幻灯片的元素（第一个元素将被粘在左边）。

我也尝试过旧版本的 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>
  );
};

Answer 1

我遇到了同样的问题，在我的情况下更改“显示：flex”以获取跟踪和列表帮助

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

Answer 2

面对同样的问题，我最终在 onInit 中使用超时函数来添加适当的

translate3d(0, 0, 0)

：