Почему Slick Slider обрезает высоту у активного слайда при centerMode?

Question

[Полина Емельянова]

Добрый день, коллеги.
Сталкивался ли кто с такой проблемой.
САБЖ:
Есть Slick слайдер с установленным у него centerMode.
Активный слайд должен быть больше "рядового". Для чего используется transform: scale(1.5);

ПРОБЛЕМА:
Активный слайд зарезается по высоте.
Высота слайдера отсчитывается от непонятного мне значения.

Прошу, помогите разрешить задачу.

Кодепен

Должно быть вот так


Получается так

Comments

[Дмитрий]

Сам слайдер ничего не обрезает. Если посмотрите, то в коде есть блок slick-list. У него есть свойство overflow: hidden; чтобы вложенный slick-track мог ездить внутри туда-сюда. Поэтому если вам нужна высота, может надо ее предусмотреть паддингами для slick-item ?

[Полина Емельянова]

Дмитрий, БЛАГОДАРЮ!!! Решение, конечно. Намучаюся только с адаптером.)))) Даже если паддинг в % или em... Пока поставлю так. И...
Подожду, может еще чего добрые коллеги подскажут.

[Дмитрий]

Полина Емельянова, можно исправить это свойство на overflow-x: hidden; чтобы по вертикали не скрывалось. где-то в slick-theme.css
Или второй вариант - сделать блок, который у вас увеличивается position: absolute; left:50%; top:50%; margin: -YY 0 0 -XX; z-index: 1000; тогда может быть тоже будет вылезать поверх. Но, вероятно в каких то браузерах oveflow скроет даже абсолютный блок. Надо проверять.

Answer 1

[its2easyy]

Слик считает высоту не учитывая scale, а на блоке .slick-list висит overflow: hidden которое обрезает по высоте.
Можно к .slick-slide добавить padding-top и padding-bottom, чтобы высота каждого слайда стала равной нужной высоте центрального слайда с увеличенной картинкой, тогда картинка после scale займёт свободное место

Answer 2

[BB 8]

Вот с этого значения расчитывается высота центрированного слайдера:

<div class="slick-slide slick-current slick-active slick-center" data-slick-index="0" aria-hidden="false" style="width: 573px;" tabindex="-1" role="option" aria-describedby="slick-slide00"><img src="https://pp.userapi.com/c837322/v837322210/33ccb/saIIiGQzX7g.jpg" alt=""></div>