Slick внутри вкладок Bootstrap

21.07.2020 | Написал

Слайдер Slick довольно популярен. Я тоже его использую при верстке сайтов, в том числе и на фреймверке Bootstrap. Хотя bootstrap и имеет карусель, slick гибче настраивается и выглядит более легковесным на странице. Но вот если его поместить во вкладки, то на закрытых вкладках слайдер не отображается корректно и не работает. Почему это происходит, и как исправить?

Причина – скрипт неправильно высчитывает высоту и ширину блока слайдера, т.к. вкладка скрыта. Исправить это можно, если переинициализировать слайдер в момент открытия вот таким JS-кодом:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  $('.your-class').slick('setPosition');
})
Метки: , ,
Комментарии читателей статьи "Slick внутри вкладок Bootstrap"

Нет комментариев.

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

Ваш адрес email не будет опубликован.

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