Slick carousel - force slides to have the same height
As answered above.works fine on slick slider
.slick-track
{
display: flex !important;
}
.slick-slide
{
height: inherit !important;
}
but, i have an issue when using slick sync navigation
simple put below css to cover it.
.slick-slide {
margin-bottom: 0;
object-fit: cover;
}
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;
}