Bxslider отображение картинок после полной загрузки слайдера

Как сделать так, чтобы не картинки слайдера были скрыты и не показывались до тех пор, пока не загрузится скрипт, и не активируется слайдер? В данной заметке речь идет о Bxslider, но думаю, что это в той же степени актуально для любого другого javascript-слайдера. Нужно лишь найти в документации функцию-колбэк, которая срабатывает после активации слайдера. В случае с Bxslider это onSliderLoad.

Наилучший вариант — первую картинку сделать видимой, а остальные скрыть. Если ваш бэк-энд (или CSS) позволяет это сделать, то круто! Это наилучший вариант, потому что сразу же выделяется место под слайдер, и верстка совсем не прыгает после полной загрузки и активации слайдера.

Тогда при вызове пишем вот так:

Если нет возможности оставить первый элемент видимым, то можно добавить класс hidden и к первому элементу, но тогда нужно будет прописать fix в CSS - чтобы первый элемент оставался видимым. Это реализуется примерно так:

/* Универсальный класс по всему сайту */
.hidden{
    visibility: hidden;
}
/* Fix для первого элемента слайдера */
.gentle_slider_item.hidden:first-child{
    visibility: visible;
}

Есть еще кое-какие простые трюки костыли чтобы избежать подергивания верстки. Можно задать высоту для элемента-обертки слайдера. Эм, еще какие-то есть наверняка, но об этом пишите в комментариях:)