Почему пропадает js слайдер или карусель пока не потянешь за край браузера?

Question

[Anton Essential]

Добрый день, объясните пожалуйста, приведу пример:
У меня имеется в теле документа карусель или слайдер, bxSlider либо любой другой,
слайдер с параметрами я вызываю в скрипте функцией $('.slider').bxSlider();
Все стандартно, сам слайдер у меня лежит в блоке который находиться в display: none;
По клику на кнопку я заворачиваю блок таглом класса '.active{display:block}'
Блок появляется но слайдер не отображается пока не потянешь браузер за край, я начал смотреть разные слайдеры и карусели и в большинстве случаев они не работают
когда контент загружается и класс родителя слайдера стоит в дисплей нон.

Answer 1

[Николай]

Скорее всего проблема в display:none: неправильно считаются ширина/высота блоков при инициализации слайдера. А если потянуть браузер за край - происходит событие resize, которое как правило обрабатывается в слайдере и происходит пересчет размера блоков. Решений проблемы несколько:
1. прятать блок не с помощью display:none, а например через position: absolute; top: -10000px; left:-10000px;
2. при активизации вызывать функцию из api слайдера, заставляющую перестчитать высоту/ширину.
Для bxSlider я думаю подойдет функция

slider = $('.bxslider').bxSlider();
slider.reloadSlider();

Comments

[Anton Essential]

да про reload я прочитал в документации, а в целом суть ясна, спасибо.