How to automatically set height of slick carousel

Question

I'm using the slick caurousel for test. I am currently hard coding the height of the slides:

<div class="slides">
    <div>slide a</div>
    <div>slide b</div>
    <div>slide c</div>
</div>

CSS:

.slides {
    height: 200px;
}

What I would like, though, is for the carousel to automatically be the hight of the tallest slide. Is there a way to do this?

Prettify

I think the problem doing this, is that when you have images inside with an undefined height, you have to wait for them to be loaded and then set the height afterwards. And this could be visible for the user, like flickering ... – Inbreeding

Answer 1

$('.class').slick({
adaptiveHeight: true
});

Add the adaptiveHeight to set auto height of the image

Cathrine

Doesn't seem to work in my case. My slides contain mainly text, which may be why. Perhaps adaptiveHeight only works for images? – Prettify

Works for mee too,using text + images as content @Sam Lee! – Creek

Answer 2

.slick-slide {
  height: 0px!important;
 }
 .slick-slide.slick-active {
    height: 100% !important;  
 }

Above CSS might help

Selfsatisfied