Equal height slides

[LMBE]

Be nice to have the option to set smaller slides to the height of the tallest.

[smotzart]

$('.your-slider').on('setPosition', function (event, slick) { $(slick.$slides).height('auto').css('height', $(slick.$slideTrack).height() + 'px'); });

[jinch]

I converted @leggomuhgreggo SCSS version to standard CSS (below)? Unfortunately this blows up the the slider for me (no images are visible when applied). The javascript solutions where not working either and I'm hesitant to load yet another JS library to do this. Trying to find the cleanest working approach - the search continues... : |

.slick-initialized .slick-track { display: flex; } .slick-initialized .slick-track .slick-slide { display: flex; height: auto; align-items: center; justify-content: center; }

[Pawelek55]

Recommend: .slick-initialized .slick-slide { display: block; max-height: 300px; }

.slide_elem .img_cont { position: relative; height: 230px; margin-bottom: 14px; background: #f5f5f5; display: flex; border: 1px solid #000; }

[cjpdee]

This was such a journey

[ghost]

This was such a journey

I hate this script so much. it's on every single ancient, poorly coded abomination of a website that I have dealt with lately.

seeing this thread rekindled my hatred

[verybigelephants]

This was such a journey

I hate this script so much. it's on every single ancient, poorly coded abomination of a website that I have dealt with lately.

seeing this thread rekindled my hatred

i don't know if you've ever implemented something with other slider libraries, but believe me, this is one of the better ones. (although this not being as a configurable option is really a bad decision)

[timcutting-gfm]

I know foIks have mentioned this already, but here's how to get it done with flexbox:

.slick-track{
    display: flex;

    .slick-slide{
        display: flex;
        height: auto;
        align-items: center; //optional
        justify-content: center; //optional
    }
}

pen

Alternatively, the JS @ramonleenders wrote will do the trick.

Hope this is helpful

Great solution, thanks for posting! For some, a small change to align-items might be a better fit.

 .slick-track{
     display: flex;

     .slick-slide{
         display: flex;
         height: auto;
         align-items: stretch;
         justify-content: center; //optional
     }
 }

[MaxChabanenko]

Have you noticed, that there is an additional

in slide that breaks the equal height workarounds? For example: https://github.com/kenwheeler/slick/issues/3207 https://github.com/akiran/react-slick/pull/1848 https://github.com/kenwheeler/slick/issues/3110

For this same height issue for me helped this css piece of code:

.slick-slide div:not([class]):not([id]) { height: 100%; }

Of course with .slick-track { display: flex; align-items: stretch; justify-content: center;
} .slick-slide { height: auto; }

[verybigelephants]

lol i love how this issue gets ressurected once in a while for 10 years straight

amazing how we now have an ai that is about to take on our programming job positions, but there is no way to set equal height slides in slick.js

[Navjeet]

Use below css to have same height images

.abc-wrapper .slick-initialized .slick-slide { display: flex; }

.abc-wrapper .slick-slide { height: 310px; align-items: center; justify-content: center; }

.abc-wrapper .slick-list { height: unset !important; }

Thank you

[Ahmaadkhader]

If you are using a vertical slider, this library may be useful: https://github.com/liabru/jquery-match-height . Note: Ensure to set byRow: false in the options.

[hasib-devs]

I know foIks have mentioned this already, but here's how to get it done with flexbox:

.slick-track{
    display: flex;

    .slick-slide{
        display: flex;
        height: auto;
        align-items: center; //optional
        justify-content: center; //optional
    }
}

pen

Alternatively, the JS @ramonleenders wrote will do the trick.

Hope this is helpful

It will not work if you have more then 1 row