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

каруселька slick в табах bootstrap 3

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

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

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

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

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

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

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

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

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

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

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

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

  • NooobSkyWalker

    Ребята, вы супер, таже самая проблема, спасибо огромнейшее!!!
    Думал, что дело в самой карусели, а тут оказывается нужно было ТАБ править, благодарочка, + в карму Вам 🙂

  • Jenia Ishenko

    Огромное спасибо! Даже stackoverflow не помог. Но Ваше решение работает! Вместо > надо ставить >

  • Дмитрий Шанин

    Спасибо за решение.
    Немного поправил стили, что бы были видны точки навигации:

    .tab-content > .tab-pane,
    .pill-content > .pill-pane {
    display: block;
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    }

    .tab-content > .active,
    .pill-content > .active {
    height: auto;
    overflow: visible;
    }

    .tab-content.slider-dotted {
    padding-bottom: 30px;
    }

    .tab-content.slider-dotted .slick-dotted.slick-slider {
    margin-bottom: 0;
    }