kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.49k stars 5.89k forks source link

Using adaptiveHeight, Slick is incorrectly calculating the height of a slide the first time it is displayed. #4197

Closed stevenpaulr closed 2 years ago

stevenpaulr commented 2 years ago

This is happening on our website: https://vertoeducation.org/careers/

There's a slick slider with testimonials part way down the page. The testimonials are different heights, but the first time it displays them, it doesn't always calculate the height right. Once you cycle through them all, it's fine, or if you go back to one that just got cut off, then it's fine.

I'm wondering if the problem is that I have 2 divs within the slick-slide. Do I need to encapsulate them in another div?

stevenpaulr commented 2 years ago

I've tried adding in .min-height and .min-width to the parent, that didn't help. I tried moving both divs into a container div, and that didn't help. I also tried the different lazyLoad methods, but that didn't fix it either. At this point I'm not sure what to do.

stevenpaulr commented 2 years ago

Solved my problem. It had to do with lazy loaded images. I encapsulated the image in a div and gave it the dimensions of the image so that the rest of the content would leave space for the image before it loaded.