Slick carousel adaptive height not working

Slick adaptive height not working

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
  <div class="slider">
    <div class="aslide">1</div>
    <div class="aslide aslide-2">2</div>
    <div class="aslide">3</div>
    <div class="aslide">4</div>
    <div class="aslide">5</div>
    <div class="aslide">6</div>
    <div class="aslide">7</div>
    <div class="aslide">8</div>
    <div class="aslide">9</div>
    <div class="aslide">10</div>
    <div class="aslide">11</div>
    <div class="aslide">12</div>
  </div>

CSS

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

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

.aslide {
  background: yellow;
  height: 50px;
}

.aslide-2 {
  height: 150px;
}

JavaScript

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

// slick slider
const mySlider = $('.slider').on('init', function(slick){
  
  // on init run our multi slide adapt height function
  multiSlideAdaptiveHeight(this);
  
}).on('beforeChange', function(slick, currentSlide, nextSlide){

  // on beforeChange run our multi slide adapt height function
  multiSlideAdaptiveHeight(this);
  
}).slick(options);

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

  console.log(slider.textContent);
	
  // 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(i) {
    
      // add current active slide height to our active slides array
      activeSlides[i] = $(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) {
        
        // overrider 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 adapt height function incase current slider active slides change height responsively
	multiSlideAdaptiveHeight(mySlider);

});