I was implementing slick slider on a page with 2 sliders and was attempting to get adaptiveheight to function, and it would not work for either one. I went through all the js files, trying to find a hard coded height and couldn’t. I started playing around with the CSS and voila! Found the offending item! This took care of the problem across every browser.

Here’s what you can try:

If you are using 2 sliders on the same page, the two sliders should have different class names. If you are having the adaptiveheight problem, note the class name of the offending item:

<div class="testimonialslider">
(insert slides here)
</div>

Open the slick.css file and find the .slick-slide style at line number 77-ish. The problem was the “height: 100%;” entry.

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

Copy the entire style.

Paste the entire style below that one:

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

Add the .testimonialslider (whatever you named the slider) in front of the class name: (remember to put a period in front of the class name and a space after!)

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
.testimonialslider .slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

Change the height to:

.testimonialslider .slick-slide
{
    display: none;
    float: left;
    height: auto;
    min-height: 1px;
}

Save.

Done! If this worked for you, support me by visiting the advertiser above!

Slick slider not working. Slick slider adaptiveheight not working. Adaptiveheight slick slider not functioning. Adaptiveheight doesn’t work slick slider.