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.