React Slick 渲染中的幻灯片溢出

Question

我不认为这是正常行为或 React Slick，但在初始化我的页面时（通过地址栏），轮播看起来像这样：

如您所见，屏幕右侧有一个棕色条。但是当我调整浏览器大小时 window，它显示得很好。

在渲染组件时有什么方法可以防止这种情况发生吗？

Answer 1

我弄清楚是什么导致我的组件出现这种行为，我是这样定义幻灯片的高度的：

const heightCarousel = '80vh'

    <Slider {...settings}>
      <div style={{height:heightCarousel, background:'#F4CC67', padding:'15px 0', textAlign:'center'}}><h3>1</h3></div>
      <div style={{height:heightCarousel, background:'#AA8326', padding:'15px 0', textAlign:'center'}}><h3>2</h3></div>
    </Slider>

而不是下面，这让 React-slick 自动定义每张幻灯片的宽度 :

    <Slider {...settings}>
           <div style={{background:'#F4CC67', textAlign:'center'}}><div><h2>TEST</h2></div></div>
           <div style={{background:'#AA8326', textAlign:'center'}}><h3>2</h3></div>
    </Slider>

请注意，您不能在幻灯片中定义高度，否则您会遇到同样的问题，但您仍然可以使用填充来设置幻灯片内容的样式。

React Slick 渲染中的幻灯片溢出

Overflow on slides at React Slick render

css

reactjs

react-slick