Я потихоньку становлюсь настоящим спецом по bxSlider'у. Сегодня рассмотрим следующую ситуацию: нам нужно, чтобы слайдер изначально был скрыт, и проявлялся только при клике на каком-нибудь внешнем элементе.
Примерно так:
1
2
А вместо этого получаем какую-то фигню:
После долгих разборок доподлино устанавливаем, что проблема связана с display: none на контейнере, который устанавливается сразу при загрузке страницы. Из-за этого слайдер не успевает рассчитать свою ширину и схлопывается. Оптимально, конечно, поменять слайдер или отказаться от сокрытия контейнера, но меня выручил такой костыль сразу после кнопок:
setTimeout(function()
{
$('#male').addClass('invisible');
$('#female').addClass('invisible');
}, 1);
Даже задержки в милисекунду оказалось достаточно, чтобы блок рассчитался и скрылся, а если задержку не выставлять, то ничего не выходит. Заметить невооруженным взглядом такую паузу невозможно. Немного опасаюсь артефактов на каких-нибудь старых мобильниках и доисторических браузерах, но пока, вроде, все нормально.