Адаптивная высота для вертикального расположения блоков slick slider?

Question

[HamSter]

Пыталась решить задачу и наткнулась на такую проблему.

Есть slick slider с вертикальным расположением блоков (vertical: true). В каждом блоке "спрятано" изображение к тексту. При выборе активного (либо центрального) слайда появляется это скрытое изображение.

Но слайдер почему-то "неадекватно" себя ведет (то скачет, то все слайды отображает вместо положенных 3-х). adaptiveHeight - не работает для вертикального расположения блоков.

Вопрос: Как решить данную проблему, чтобы вертикальных слайдов было 3 (к примеру), центральный (или просто активный) был с изображением?

CodePen

Answer 1

[Егор Живагин]

Интересная проблемка. Смотри, у тебя в слайде картинка с display: none и абсолютный абзац. Оба выходят из потока, т.е. для браузера слайд, считай, пустой. И для слика. Вот он и уменьшает размеры слайдера до 1 слайда, где есть картинка.

С display: none slick не подружится. Как вариант - сделать картинку абсолютной + прозрачной + убрать вверх. А для класса .slick-center возвращать всё обратно. Мне впадлу это делать, могу просто рабочий вариант твоего слайдера кинуть - вот он

Comments

[HamSter]

codepen.io/anon/pen/QpxOzj - тут слайды все одинаковой высоты. А если не задавать абсолют, а к примеру варьировать высоту, то все равно беда. Но за мысль спасибо!