Vfrdtyky

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

I need the Slides to have the same height, but with CSS flex-box it doesnt work as the slides have conflicting CSS definitions.

Also didn't find anything usefull in the forums and on the web.

If i get something working, i will post the solution here.
Of course any suggestions are welcome.

HTML

<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>

JS

$('.slider')

.slick({

    autoplay: false,

    dots: false,

    infinite: false,

    arrows: false,

    slidesToShow: 2,

    slidesToScroll: 2,

    rows: 0

});

CSS

.slide {

  height: 100%;

  background-color: #ccc;

  padding: 10px;

}

Ok guys i found an easy solution. Just add a setPosition callback function (fires after position/size changes) which sets the height of the slides to the height of the slider (slideTrack):

JS

$('.slider').slick({

    autoplay: false,

    dots: false,

    infinite: false,

    arrows: false,

    slidesToShow: 2,

    slidesToScroll: 2,

  rows: 0

})

.on('setPosition', function (event, slick) {

    slick.$slides.css('height', slick.$slideTrack.height() + 'px');

});

Dont forget that your slides need to have full height:

CSS

.slide {

  height: 100%;

}

Here is a little jsFiddle to demonstrate:
https://jsfiddle.net/JJaun/o29a4q45/

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

.slick-track

{

    display: flex !important;

}



.slick-slide

{

    height: inherit !important;

}

Enjoy! :-)

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>

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'));

   
   

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;

}