Почему JS слайдеры криво отображаются внутри встроенного в bootstrap слайдере?

Question

[Alexandr59]

Привет!
Есть вкладки (tab) на Boostrap4
Внутри каждой вкладки есть слайдер.
При обновлении страницы, слайдер на первой вкладке нормально прогружается и работает.
А на следующих вкладках слайдер некорректно отображается, до тех пор, пока не пошевелить его курсором либо пока не открыть на него браузерный инспектор.
Пробовали на более низкой версии, Bootstrap3 = ошибка повторяется.

1) Как убрать эту ошибку? Может быть, это особенность Bootstrap'a ?
2) Посоветуйте, пожалуйста, как тогда можно реализовать адаптивный слайдер со слайдером внутри?
Безуспешно пробовал:
1) Делать чтобы скрипт активации слайдера загружался при загрузке страницы.
Обворачивал в
$(document).ready ( function(){ ... });
Либо function funonload() { ... }
Либо function funonload() { ...} window.onload = funonload;

2) Пробовал использовать разные слайдеры, сейчас остановился на простейшем Slick JS
3) Почистил все ошибки в консоли, никакого результата.

Answer 1

[Егор Живагин]

Во-первых, почему так происходит:
На неактивных вкладках скорее всего display: none; у контента. Слайдер не может корректно просчитать размеры элементов.

Решение:
Делать инициализацию слайдера по клику на вкладку. Нажатие на вкладку, условно, №2 должно инициализировать слайдер только в ней. И, желательно, убивать ранее инициализированный слайдер

Comments

[Alexandr59]

Это делается с помощью js ?
Сможете подсказать, как примерно выглядит инициализация?
Насколько понял нужен onclick

[Егор Живагин]

Alexandr59, да, с помощью JS.
Инициализация слайдера - это тот код, где вы пишите конфиги.

$('.qwerty').slick({
...
});

Или onclick, или click в JS-файле - какой угодно обработчик.
Не знаю, какая структура у табов бутстрапа, но код выглядит более-менее так:

$('.tab').click(function(){
   $(this).find('.tab-content').slick({
...
})
})