Question

我们刚开始在我们的应用程序中使用jCarousel，我们遇到了一些奇怪的UI行为。在呈现页面之前的瞬间，构成内容的每个LI都会在页面上展开。一旦jQuery（“＃carousel-name”）。jcarousel（）;但是，这个页面会被弹回到它应该看起来的状态。

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

我在Stack Overflow上的其他地方读到，隐藏每个li中的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;
   }
}

在初始化jCarousel之前防止格式化错误

1 个答案: