@Alexandr59

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

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

1) Как убрать эту ошибку? Может быть, это особенность Bootstrap'a ?
2) Посоветуйте, пожалуйста, как тогда можно реализовать адаптивный слайдер со слайдером внутри?

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

2) Пробовал использовать разные слайдеры, сейчас остановился на простейшем Slick JS
3) Почистил все ошибки в консоли, никакого результата.
  • Вопрос задан
  • 185 просмотров
Пригласить эксперта
Ответы на вопрос 1
Krasnodar_etc
@Krasnodar_etc
little front
Во-первых, почему так происходит:
На неактивных вкладках скорее всего display: none; у контента. Слайдер не может корректно просчитать размеры элементов.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы