Карусель Slick внутри Bootstrap tabs и Equal height

На этой неделе шаманили над новым сайтом. Задачка не сильно сложная — лендинг для мероприятия.

В процессе разработки возникла задача сделать карусельку из нескольких слайдов (для прокрутки мероприятий и списка спонсоров)

В качестве достаточно неплохо выполненной карусельки на JQuery выбор пал на Slick (репозиторий на github)

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

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

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

Само решение #

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

/* Based on https://github.com/kenwheeler/slick/issues/187#issuecomment-59123524 */
/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;    /* undo display:none          */
    height: 0;         /* height:0 is also invisible */
    overflow: hidden;  /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;      /* let the content decide it  */
}
/* bootstrap hack end */

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

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

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

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

$(window).load(function() {
      $('.slides').on('setPosition', function () {
      $(this).find('.slick-slide').height('auto');
      var slickTrack = $(this).find('.slick-track');
      var slickTrackHeight = $(slickTrack).height();
      $(this).find('.slick-slide').css('height', slickTrackHeight + 'px');
      });
})

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

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

• 28 июня 20 г.