当我调整浏览器大小时，react-slick 幻灯片的宽度不会改变

Posted 2023-02-25

【中文标题】当我调整浏览器大小时，react-slick 幻灯片的宽度不会改变

【英文标题】：The width of react-slick slide does not change when I resize the browser

【发布时间】：2019-05-29 13:44:16

【问题描述】：

我通过 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 中调整浏览器大小时重新渲染元素有问题:(。

谢谢

【问题讨论】：

检查库的问题部分。这似乎是一个非常基本的问题。肯定有人会解决的。

您是否在任何地方设置宽度？我看到您将高度设置为自适应，但是（而且我不是反应专家）我认为您需要将宽度设置为百分比。

@JohnLord 我没有设置宽度。宽度将设置为 slick-track 的内联样式。当我们调整浏览器大小时，宽度会动态改变以使幻灯片响应

@humanbean 我仔细检查了，但是在库中，它没有提到设置滑块的宽度。我检查了其他的演示，当我调整浏览器的大小时，演示的宽度会动态改变:(。我对这种情况没有想法

【参考方案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/