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;
}
Add a couple of CSS styles and it will be ready:
.slick-track
{
display: flex !important;
}
.slick-slide
{
height: inherit !important;
}
Enjoy! :-)
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/
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;
}