bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман

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

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

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

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

Кодепен

Должно быть вот так
5a997a51de2d8364254879.jpeg

Получается так
5a997edfd79c8767152054.png
  • Вопрос задан
  • 225 просмотров
Решения вопроса 1
@its2easyy
Слик считает высоту не учитывая scale, а на блоке .slick-list висит overflow: hidden которое обрезает по высоте.
Можно к .slick-slide добавить padding-top и padding-bottom, чтобы высота каждого слайда стала равной нужной высоте центрального слайда с увеличенной картинкой, тогда картинка после scale займёт свободное место
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
fruity4pie
@fruity4pie
A
5a99827b65f11439382203.png

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

<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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы