0

アプリケーションで jCarousel の使用を開始したばかりで、奇妙な UI 動作が発生しています。ページがレンダリングされる前の一瞬、コンテンツを構成するすべての LI がページ上で展開されて表示されます。jQuery("#carousel-name").jcarousel(); が実行されますが、ページは本来あるべき姿に戻ります。

私たちのアプリでこれが見られ、どの例にも見られない理由は、私たちのコンテンツが jCarousel サイトの例よりもはるかに複雑であり、ブラウザーが HTML をレンダリングするのに時間がかかるためだと思います。

jCarousel が適切な幅を把握できないため、各 li の div を非表示にすると正しく機能しないように見えることをスタック オーバーフローの他の場所で読みました。

jCarousel にカルーセル アイテムを動的にロードさせるという頭痛の種を試す前に、他の誰かがこの問題を抱えていないか、より簡単な解決策があるかどうかを確認したいと思います。

4

1 に答える 1

0

ページの下部にある非表示の 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;
   }
}
于 2009-10-22T12:43:28.270 に答える