Slick Carousel doesn't render properly when a hidden div is made visible.

Carousel doesn’t render properly in a hidden div.

====================================================================

[ http://jsfiddle.net/k75fyzy4/1/ ]

I’ve added a fiddle- but I don’t see this working properly in fiddle either. http://jsfiddle.net/k75fyzy4/1/

Here’s everything in a single page.

https://captainmccrank.github.io/

1. Load the page above.
2. click on the “Show Div” button
3. Note that the carousel displays but without images.
4. resize the browser window & note that the carousel images render.

====================================================================

Steps to reproduce the problem

1. create a div with display set to none
2. add button to reset display:block
3. Observe that the images don’t render properly.
4. Resize the window
5. Observe the row properly rendering

====================================================================

What is the expected behaviour?

I’m hoping to see the carousel images rendered immediately when the div is made visible.

====================================================================

What is observed behaviour?

Carousel images aren’t visible until you resize the browser window.

====================================================================

More Details

• Which browsers/versions does it happen on? Chrome56
• Which jQuery/Slick version are you using? Jquery 2.2.0 Slick 1.6
• Did this work before? never

[paulinetheitgirl]

Hi @CaptainMcCrank , please try out the suggestions in https://github.com/kenwheeler/slick/issues/158

[nealoke]

@paulinetheitgirl yes totally works 😉