Slick Slider React - 无论屏幕尺寸如何，如何保持相同的宽度和空间？

Question

我正在创建一个与 Slick Slider 反应的滑块。问题是：当屏幕尺寸发生变化时，幻灯片尺寸会减小或相互堆叠。

光滑的滑块提供：

      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }, 
    …
      ]

但这并不能阻止幻灯片大小的变化，也不能固定不断变化的幻灯片之间的边距。

我尝试过：

.slick-slide {
  width: auto !important;
}

在 CSS 文件中，但随后幻灯片一层一层地累积，生成 4 行而不是 2 行。此外，动画太大，在滑块末尾创建了一个空白区域。

是否可以创建一个带有幻灯片的滑块，无论窗口大小如何，它们之间都保持相同的大小和空间？有一种方法可以保持幻灯片的固定大小，仅显示屏幕上可能的幻灯片数量并仅显示以下幻灯片的一部分（或不显示）？

以便也能做出反应。想要什么：

这是我的代码：

      const settings = {
        rows: 2,
        slidesPerRow: 1,
        slidesToShow: 3.2,
        infinite: false,
        swipeToSlide: true,
        slidesToScroll: 1,
        lazyLoad: true,
        responsive: [
            {
              breakpoint: 1200,
              settings: {
                  slidesToShow: 2.5,
                  slidesToScroll: 2,
              }
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1.7,
                    slidesToScroll: 1,
                    arrows: false                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1.4,
                    slidesToScroll: 1,
                    arrows: false
                }
            }
        ]

      };
     
      return (
        <>
          <h2>…</h2>
          <div className="cell">
            <Slider {...settings}>
                {
                    this.props.data.nodes.map((node,key) => (
                        <Cell node={node} key={key} />
                    ))
                } 
            </Slider>
          </div>
        </>
      );

谢谢！

Answer 1

例如)

1800px 中的 4 张幻灯片

slipsToShow: _.round((width * 4) / 1800, 1 or 2);

或

https://react-slick.neostack.com/docs/example/可变宽度/

Answer 2

有一个“可变宽度”选项可用于获得这种结果。查看更多： https://react-slick.neostack.com/docs/example /可变宽度