Как сделать одинаковую высоту слайдов в Slick Slider с помощью CSS

При работе с Slick Slider часто возникает проблема: если в слайдах разное количество текста или контента, карточки получаются разной высоты.

Например, в одном слайде может быть короткий текст, а в другом — несколько абзацев. В результате элементы карусели выглядят неровно.

Как сделать все слайды Slick одинаковой высоты?

Самый простой способ — использовать Flexbox.

Для начала задаём контейнеру .slick-track свойство display: flex:

.slick-track {
    display: flex;
}

Также необходимо убрать фиксированную высоту у самих слайдов:

.slick-slide {
    height: auto;
}

В большинстве случаев этого уже достаточно.

Итоговый вариант:

.slick-track {
    display: flex;
}

.slick-slide {
    height: auto;
}

Если внутри слайда находится дополнительный контейнер

Иногда одинаковой высоты у .slick-slide недостаточно. Например, если внутри каждого слайда находится карточка товара, услуги или новости.

В таком случае необходимо растянуть внутренний контейнер на всю высоту слайда:

.slick-track {
    display: flex;
}

.slick-slide {
    height: auto;
}

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

.card {
    height: 100%;
}

Теперь все карточки внутри Slick Slider будут растягиваться до одинаковой высоты.

Как прижать кнопку к нижней части карточки?

Если в карточках разное количество текста, часто требуется дополнительно выровнять кнопки «Подробнее», «Купить» или другие элементы по нижнему краю.

Для этого саму карточку можно сделать flex-контейнером:

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

.card__button {
    margin-top: auto;
}

В этом случае свободное пространство внутри карточки будет располагаться перед кнопкой, и все кнопки окажутся на одном уровне.

Полный вариант CSS может выглядеть так:

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

Почему это работает?

После установки display: flex для .slick-track все слайды становятся flex-элементами и растягиваются по высоте относительно самого высокого слайда в строке.

Если дополнительно установить height: 100% для внутренних контейнеров, одинаковую высоту получают уже непосредственно карточки внутри слайдов.

Обратите внимание на параметр adaptiveHeight

У Slick Slider есть настройка:

adaptiveHeight: true

Но она решает другую задачу — изменяет высоту всей карусели в зависимости от высоты текущего активного слайда.

Если необходимо, чтобы несколько одновременно отображаемых карточек имели одинаковую высоту, удобнее использовать вариант с Flexbox.

Таким способом можно выровнять карточки товаров, новости, отзывы, услуги и любые другие элементы внутри Slick Slider без дополнительного JavaScript.