0

我们刚刚开始在我们的应用程序中使用 jCarousel，并且遇到了一些奇怪的 UI 行为。在页面呈现之前的一瞬间，构成内容的每个 LI 都会在页面上展开显示。一旦 jQuery("#carousel-name").jcarousel(); 但是，执行后，页面会弹回到它应该看起来的样子。

我认为我们在我们的应用程序中看到这一点但在任何示例中都没有看到的原因是因为我们的内容比 jCarousel 站点上的示例复杂得多，并且浏览器需要更长的时间来呈现 HTML。

我在 Stack Overflow 上的其他地方读到，隐藏每个 li 中的 div 似乎无法正常工作，因为 jCarousel 无法确定正确的宽度。

在我尝试让 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 回答