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

[CaptainMcCrank]

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]

I have a similar issue see the gif below. Any suggestions @paulinetheitgirl ? :)

[paulinetheitgirl]

Hi @nealoke , can you provide a sample of your code? Gist (https://gist.github.com/) or Codepen.io would be great.

[benedict1986]

I got the same problem as well. bannerA is fine. It is shown every time. However, bannerB does not show until resizing the window or click a dot. The same behaviour as @nealoke. Any help will be welcome. I tried many methods, including reinitialize again after loading the images. Thanks.

$("#bannerA").slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true }); $("#bannerB").slick({ dots: true, infinite: true, speed: 300, slidesToShow: 2, adaptiveHeight: true }); for (let image of this.images) { $("#bannerA").slick('slickAdd', image ); if (image.isBanner) { $("#bannerB").slick('slickAdd', image ); $("#bannerA").slick('refresh'); $("#bannerB").slick('refresh'); } }

[paulinetheitgirl]

Hi @benedict1986, the slickAdd examples on http://kenwheeler.github.io/slick/ use divs. Make sure your slide content is enclosed in divs.

[nealoke]

@paulinetheitgirl yes totally works ;)