0

我通过 react-slick 创建了一张推荐幻灯片。

我的代码是：

 const settings = {
      dots: true,
      adaptiveHeight: true,
      swipeToSlide: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoPlay: true,
      className: 'sample'
    };

一切正常。但是，当我调整浏览器的大小时，幻灯片的宽度不会改变。我检查了我的 console.log，slick-track 的宽度总是 9900px。我认为调整浏览器大小时应该更改宽度。

谁能帮我解决这个问题？我认为在 reactjs 中调整浏览器大小时重新渲染元素有问题:(。

谢谢

4

1 回答 1

2

如果您的目标是在调整浏览器大小时更改 react-slick 选项，请使用响应式选项。

var settings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  initialSlide: 0,
  responsive: [
    {
      breakpoint: 1024, // width to change options
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        initialSlide: 2
      }
    }
  ]
}

https://react-slick.neostack.com/docs/example/responsive/

于 2019-10-23T10:12:05.470 回答