Slick carousel - force slides to have the same height

Question

I'm 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 doesn't work as the slides have conflicting CSS definitions.

Also, I didn't find anything useful in the forums and on the web.

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

Answer 1

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

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

Enjoy! :-)