How to Make Slick Slider Slides the Same Height with CSS

A common problem with Slick Slider is that slides contain different amounts of text or content, making the cards different heights.

One slide might contain a short sentence while another has several paragraphs, leaving the carousel uneven.

How Can You Make All Slick Slides the Same Height?

The simplest approach is to use Flexbox.

First, set display: flex on the .slick-track container:

.slick-track {
    display: flex;
}

You also need to remove the fixed height from the slides themselves:

.slick-slide {
    height: auto;
}

In most cases, this is sufficient.

Combined CSS:

.slick-track {
    display: flex;
}

.slick-slide {
    height: auto;
}

When a Slide Contains an Additional Container

Sometimes giving .slick-slide elements equal heights is not enough, for example when each slide contains a product, service or news card.

In that case, stretch the inner container to the full slide height:

.slick-track {
    display: flex;
}

.slick-slide {
    height: auto;
}

.slick-slide > div {
    height: 100%;
}

.card {
    height: 100%;
}

All cards inside Slick Slider will now stretch to the same height.

How Do You Align a Button with the Bottom of a Card?

When cards contain different amounts of text, you may also need to align their ‘Read more’, ‘Buy’ or other buttons along the bottom.

Make the card itself a flex container:

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card__button {
    margin-top: auto;
}

Any spare space within the card will appear above the button, aligning all buttons at the same level.

The complete CSS could look like this:

.slider .slick-track {
    display: flex;
}

.slider .slick-slide {
    height: auto;
}

.slider .slick-slide > div {
    height: 100%;
}

.slider .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.slider .card__button {
    margin-top: auto;
}

Why Does This Work?

Setting display: flex on .slick-track turns the slides into flex items, which stretch to match the tallest slide in the row.

Setting height: 100% on the inner containers then gives the cards within the slides equal heights as well.

A Note on adaptiveHeight

Slick Slider has the following setting:

adaptiveHeight: true

It solves a different problem: changing the height of the entire carousel to match the currently active slide.

If several cards displayed at once need to have the same height, Flexbox is the more convenient option.

This approach aligns product cards, news items, reviews, services and other Slick Slider content without additional JavaScript.