Предотвращение неправильного форматирования до инициализации jCarousel

Question

Мы только начали использовать jCarousel с нашим приложением, и мы столкнулись с каким-то странным поведением пользовательского интерфейса. За секунду до отображения страницы каждый LI, составляющий контент, отображается на странице расширенным. После jQuery («# carousel-name»). Jcarousel(); выполняется, однако, страница возвращается к тому, как она должна выглядеть.

Я предполагаю, что причина, по которой мы видим это в нашем приложении, но не в любом из примеров, состоит в том, что наш контент намного сложнее, чем у примеров на сайте jCarousel, и для браузеров требуется больше времени HTML.

Я читал в другом месте, что переполнение стека, которое скрывает div в каждом ли, похоже, не работает правильно, потому что jCarousel не может определить правильную ширину.

Прежде чем я попытаюсь устранить головную боль, позволяя jCarousel динамически загружать элементы карусели, я хотел бы увидеть, есть ли у кого-нибудь еще эта проблема и есть ли какие-либо более простые решения.

Answer 1

Я закончил это, загрузив содержимое для карусели внутри скрытых LI в нижней части страницы. При загрузке страницы, я инициализировать карусель с набором itemLoadCallback:

itemLoadCallback: {onBeforeAnimation: switchHiddenCarouselParts} 

В функции itemLoadCallback я добавляю каждую скрытую панель с каруселью:

carouselLoaded = false; 
function switchHiddenCarouselParts(carousel, state) { 
    if (!carouselLoaded) { 
     panes = ["pane1", "pane2"]; 

     for (i = 0; i < panes.length; i++) { 
     hidden = $("#"+panes[i]); 
     carousel.add((i+1), hidden.html()); 
     hidden.remove(); 
     $("#"+panes[i]).show(); 
     } 
     carouselLoaded = true; 
    } 
}