На этой неделе шаманили над новым сайтом для нашего федерального университета. Задачка не сильно сложная - лендинг для мероприятия.
В процессе разработки возникла задача сделать карусельку из нескольких слайдов (для прокрутки мероприятий и списка спонсоров)
В качестве достаточно неплохо выполненной карусельки на JQuery выбор пал на Slick (репозиторий на github)

Сама верстка выполнялась с использованием Bootstrap третей версии, а карусельку по задаче надо было разместить внутри bootstap tabs

То есть было - 5 табов - внутри каждого таба своя карусель. Первая вкладка активна по умолчанию - проблем нет, а вот при открытии последующих наблюдался очень неприятный баг - слайды карусельки не разворачивались и тупо "кучковались" на первом слайде.

Благо у нас есть github где удалось найти решение данной проблемы:

Само решение - github.com/kenwheeler/slick/issues/187#issuecomment-59123524

Код (то что необходимо добавить в CSS)

Это решило проблему нормального отображения Slick-карусели внутри табов третьего бутстрапа.

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

Сам же репозиторий проекта и подсказал решение данного вопроса

В JS просто добавляем:

Вот такие два решения для Slick возникли в процессе работы.

А вам приходилось сталкиваться с этой каруселькой? Как впечатления?