Question

我通过react-slick制作了证明幻灯片。

我的代码是：

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

一切正常。但是，当我调整浏览器的大小时，幻灯片的宽度不会改变。我在console.log中检查，光滑轨道的宽度始终为9900px。我认为在调整浏览器大小时应该更改宽度。

有人可以帮我解决这个问题吗？我认为在reactjs中调整浏览器大小时，重新渲染元素存在问题：（。

谢谢

Answer 1

如果您的目标是在调整浏览器大小时更改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/

调整浏览器大小时，可滑动的幻灯片的宽度不会更改

1 个答案: