Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Slick слайдер внутри вкладок bootstrap tabs

Про установку самого slick slider на Ваш сайт можете посмотреть по этой ссылке. Бывают случаи когда нужно установить Slick слайдер внутри вкладок bootstrap tabs. Это могут быть блоки вкладок с каруселями товаров такого типа: Новинки | Популярное | Рекомендуем. При переключении по каждой вкладке должна быть соответствующая карусель с товарами. В таком случае, конечно, Мы будем использовать bootstrap tabs вместе с каруселью slick.js. Но если мы внутрь каждой вкладки поставим нашу карусель мы можем столкнуться с проблемой когда на slick слайдер неправильно отображается, либо вовсе не отображается, но как только мы кликнем на кнопку навигации то все стает на свои места. Еще в таком случае корректно работает только первая активная вкладка.

Все происходит потому что при инициализации самого скрипта slick слайдера его html код скрыт и скрипт неправильно высчитывает высоту и ширину самого блока. Чтобы это не происходило, нужно в момент переключения вкладок перепозиционировать слайдер либо его перезагрузить.

Чтобы Slick слайдер внутри вкладок bootstrap tabs работал нормально, нам понадобиться такой код:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.your-class').slick('setPosition');
})

В коде написано что при переключении вкладок bootstrap tabs идет перепозиционирование slick slider. Смотрите сам пример:

See the Pen Slick slider inside bootstrap tabs by Хміль Діма (@dmondma) on CodePen.dark

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X