Overflow on slides at React Slick render

Question

I don't think that's the normal behavior or React Slick, but when initialize my page (via address bar), the carousel looks like that :

As you can see, there's a brown bar at right side of the screen. But when I resize my browser window, it displays well.

Is there any way to prevent that when rendering the component?

I think it's normal, I also faced it while working with `react-slick`. You'll need to manage it with styling. May be try to add some padding and see if it works. — Hardik Modha, Feb 04 '17 at 15:21

score 0 · Accepted Answer · answered Feb 04 '17 at 17:07

I figured out what caused this behavior on my component, I was defining the height of the slide this way :

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>

Instead of below, which lets React-slick defining the width automatically of each slide :

    <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>

Note that you cannot define height inside a slide or you will get the same issue, but you still can play with padding to style your content inside.

Overflow on slides at React Slick render

1 Answers1