Slick carousel - force slides to have the same height

Question

Im having trouble with the Slick carousel JS plugin with multiple slidesToShow which have different heights.

I need the Slides to have the same

Answer 1

I've another css-only solution. you can override floated elements with table/table-cell.

$(function() {
  $('.slider')
    .slick({
      autoplay: false,
      dots: false,
      infinite: false,
      arrows: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      rows: 0
    });
})

.slide {
  background-color: #ccc;
  padding: 10px;
  display: table-cell !important;
  float: none !important;
}

.slick-track {
  display: table !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/slick-carousel/1.8.1/slick.min.js"></script>


<div class="slider">
  <div class="slide">
    <p>Lorem ipsum.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
  </div>
  <div class="slide">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

Answer 2

I've wrote a quick JS hack to make a gallery with different images heights to look a little neater.

It does the following:

1. Get slider instance
2. Find out it's height - images height will be set to that
3. Get the src attr for each image and hide it

4. Set src attr to image's parent as a background image together with some CSS.

   function equalizeImagesHeight(slider) {
       const slides = slider.find('.slick-slide');
       const imgHeight = $(slider)[0].clientHeight;
       slides.each(function(slide){
           const src = $(this).find('img').hide().attr('src');
           $(this).css({
               backgroundImage:'url('+src+')',
               minHeight: imgHeight,
               backgroundSize: "cover",
               backgroundPosition: "center"
           });
       });
   };
   

   equalizeImagesHeight($('.my-slider'));

Answer 3

The js solution from @JJaun is not perfect, because you see the height jumping if you use an background image for the slides. This worked for me:

.slick-track {
  display: flex !important;
}

.slick-slide {
  height: auto;
}

Answer 4

For future searches:

You can simply use:

$('.slick').slick({ 
      /* your config */ 
 }).on('setPosition', function (event, slick) {
      slick.$slides.css('height', slick.$slideTrack.height() + 'px');
 });

Answer 5

Add a couple of CSS styles and it will be ready:

.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

Enjoy! :-)

Answer 6

Above suggestions didn't work for me. My slider images are al portrait but might have different h/w aspect ratios. I fixed it using js. Feels ugly though, wish I found something cleaner.

$carousel.on('setPosition', function (event, slick) {
      const $slideImages = slick.$slideTrack.find('.slick-slide-img');
      if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;
      $slideImages.height('auto');
      $slideImages.width('100%');
      const imgHeights = $slideImages.map(function(){
        return this.clientHeight;
      }).get();
      const maxHeight = Math.max.apply(null, imgHeights);
      $slideImages.height(maxHeight);
      $slideImages.width('auto');
    }

I had to use the setPosition event eventhough the code only needs to be executed once, after initialising slick. The init event doesn't work because the image heights on init are way off. Same for the first one or two setPosition events - hence the if($slideImages.first()[0].clientHeight >= $slideImages.first()[0].naturalHeight) return;.