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