How to fix slick slider jumping image on load

Question

I have slick slider with adaptiveHeight attribute set to false. So, if i have small image in slick container first slide - it will be centered vertically, and left areas will be filled with background color (like in this image ).

How can i calculate slick slider area height before slick is loaded to prevent 'jumping' on load? Do anyone know, how slick calculates image height and width in slick container? Any ideas?

Answer 1

You could wrap slick with a plugin like ImagesLoaded to ensure your images have a height before initialising Slick. If you don't want the flash of unstyled images this will create, you'll need to apply some styles to hide them initially (eg position them absolutely off the left side of the screen) and then remove these styles when your images are loaded, something like:

$('#slider').imagesLoaded( function() {
  // remove your hiding class
  // initialise slick
});