Slick carousel adaptive height not working when showing 2 slides

Question

I am building a website with some sliders and using Slick for that. Usually, in regards to the slides when I am showing 1 slide at a time the adaptive height works but when showing 2 slides at the same time it doesn't work. Here is the issue replicated in a JSFiddle.

Here is the JavaScript:

var options = {
  slidesToShow: 2,
  slidesToScroll: 2,
  dots: true,
  arrows: false,
  dotsClass: 'slick-dots slick-dots-black',
  adaptiveHeight: true,
};

$('.slider').slick(options);

I've been googling this issue and it seems other people have similar issues but I couldn't find a solution.

Any ideas appreciated!

Solution

Yeah it does seem that slick will only allow adaptiveHeight on single sliding carousels.

In the docs on adaptiveHeight it says this...

Enables adaptive height for single slide horizontal carousels.

It's funny I never expected this behaviour from slick, I assumed adaptive height worked in all cases. But apparently not.

This is a little bit hacky but might cover a solution for your website to enable adaptive height on multi slide sliders. This essentially finds the tallest slides currently on display and adds a height to the .slick-list. Using css transition on this element gives the slick adaptiveHeight effect.

Also we have a .on('resize') event which re-runs the slider height checks incase the slide content is fluid and the slide heights change responsively.

Read my comments in script to see what is going on...

Also see fiddle here... https://jsfiddle.net/joshmoto/1a5vwr3j/

// my slick slider options
var options = {
  slidesToShow: 2,
  slidesToScroll: 2,
  dots: true,
  arrows: false,
  dotsClass: 'slick-dots slick-dots-black',
  adaptiveHeight: true,
};


// my slick slider as constant object
const mySlider = $('.slider').on('init', function(slick) {

  // on init run our multi slide adaptive height function
  multiSlideAdaptiveHeight(this);

}).on('beforeChange', function(slick, currentSlide, nextSlide) {

  // on beforeChange run our multi slide adaptive height function
  multiSlideAdaptiveHeight(this);

}).slick(options);


// our multi slide adaptive height function passing slider object
function multiSlideAdaptiveHeight(slider) {

  // set our vars
  let activeSlides = [];
  let tallestSlide = 0;

  // very short delay in order for us get the correct active slides
  setTimeout(function() {

    // loop through each active slide for our current slider
    $('.slick-track .slick-active', slider).each(function(item) {

      // add current active slide height to our active slides array
      activeSlides[item] = $(this).outerHeight();

    });

    // for each of the active slides heights
    activeSlides.forEach(function(item) {

      // if current active slide height is greater than tallest slide height
      if (item > tallestSlide) {

        // override tallest slide height to current active slide height
        tallestSlide = item;

      }

    });

    // set the current slider slick list height to current active tallest slide height
    $('.slick-list', slider).height(tallestSlide);

  }, 10);

}


// when window is resized
$(window).on('resize', function() {

  // run our multi slide adaptive height function incase current slider active slides change height responsively
  multiSlideAdaptiveHeight(mySlider);

});

body {
  background: skyblue;
  margin: 0;
  padding: 20px;
}

.slick-list {
  transition: all .5s ease;
}

.aslide {
  background: yellow;
}

<div class="slider">
  <div class="aslide">1</div>
  <div class="aslide">2<br/>2<br/>2</div>
  <div class="aslide">3<br/>3<br/>3<br/>3<br/>3</div>
  <div class="aslide">4<br/>4<br/>4</div>
  <div class="aslide">5</div>
  <div class="aslide">6<br/>6<br/>6</div>
  <div class="aslide">7<br/>7<br/>7<br/>7<br/>7</div>
  <div class="aslide">8<br/>8</div>
  <div class="aslide">9<br/>9<br/>9<br/>9<br/>9<br/>9</div>
  <div class="aslide">10<br/>10<br/>10</div>
  <div class="aslide">11</div>
  <div class="aslide">12<br/>12</div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>