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

Question

Полина Емельянова @bugo_aneo

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

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

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

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

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

Кодепен

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

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

Вопрос задан более трёх лет назад
1580 просмотров

3 комментария

Подписаться 3 Средний 3 комментария

Дмитрий @thewind

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

Написано более трёх лет назад
Полина Емельянова @bugo_aneo Автор вопроса

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

Написано более трёх лет назад
Дмитрий @thewind

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

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 16 минут назад
- 13 просмотров
1

ответ
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 14 часов назад
- 98 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 14 часов назад
- 64 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 14 часов назад
- 38 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 20 часов назад
- 60 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- 22 апр.
- 87 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 596 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

HTML-вёрстка шаблонов для SaaS-сервиса

24 апр. 2024, в 13:45

15000 руб./за проект

Вывести запрос на 25 страницу яндекса

24 апр. 2024, в 13:32

300 руб./за проект

Доработка и поддержка сайта агрегатора на Nuxt + Laravel

24 апр. 2024, в 13:19

300000 руб./за проект

Сам слайдер ничего не обрезает. Если посмотрите, то в коде есть блок 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 · 2018-03-03 14:17:01

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

Answer 2 · 2018-03-02 19:58:10

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

<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>

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

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

Минуточку внимания

Войдите на сайт