Question

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

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

有没有办法在渲染组件时阻止它？

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渲染时幻灯片溢出

1 个答案: