adaptiveHeight animation makes lazy loaded slides 1px tall

[wc-matteo]

I think the issue is that postSlide()—a callback invoked from animateSlide() which in turn calls animateHeight()—runs after animateHeight(); but animateHeight() should run after postSlide() because it is from postSlide() that setPosition() gets called after lazy loading a new image (and it is here that the $list's height is set).

Notes: It doesn't seem to happen on all browsers (confirmed on desktop Google Chrome 46.0.2490.86), and where it does, it's not every time.

The fix below (found here) doesn't work reliably: .slick-slide { height: auto; }

[ahmadalfy]

Can you please create a jsfiddle expressing the faulty behavior?

[wc-matteo]

Here it is: https://jsfiddle.net/zf1jvah2/6/

If you remove animateHeight() https://jsfiddle.net/zf1jvah2/5/ The issue doesn't appear (or, on jsfiddle, sometimes it appears on load but not when changing slides).

(The embeded code is the lastest version, plus the fix I suggested here)

UPDATED!

[ctolkien]

We're hit by this as well in the scenario where images are slow to load.

[GordonDrop]

I've encountered same issue. It took me a while to deal with it. My workaround:

init: function (e, slick) {
    slick.$slider.find('img').first().on('load', function () {
      $(window).trigger('resize');
    });
}

[natebeaty]

GordonDrop's fix also worked for me when I was hiding the slider, changing a slide with arrow keys, then showing it again where it had the same 1px height issue.

[sinapcs]

@GordonDrop thank you. triggering window's resize event did the trick for me on react-slick. window.dispatchEvent(new Event('resize')); call this on image load

[proteo]

@GordonDrop thanks, this put me on the right track. For newcomers, this code fixes the issue for me with 1.9.0 version (which uses events):

$('.some-element').slick({
  lazyLoad: 'ondemand',
  adaptiveHeight: true,
  slidesToShow: 1,
  slidesToScroll: 1
})
.on('lazyLoaded', function(event, slick, image, imageSource) {
  slick.resize();
});