javascript - 页面加载时的 Flickity 在水平之前显示垂直

Question

当我的页面第一次加载时，我会在 flickity 显示幻灯片之前垂直看到元素。如何使用 flickity 或 css 防止这种情况发生？

我尝试使用 .gallery { height:100px; } 但它仍然会扩展 div 以在折叠到滑块之前显示所有元素。

Answer 1

将 carousel-cell 上的可见性设置为隐藏，并在页面加载后将其设置为可见。

CSS：

.carousel-cell {
  /* Add whatever CSS props you want */
  visibility: hidden;
}

.carousel-cell.pageloaded {
   visibility: visible;
}

使用 javascript 添加页面加载类：

$(document).ready(function() {
  $('.carousel').flickity({
    // options
    "autoPlay": false,
    "lazyLoad": 2
  });
  $(".carousel-cell").addClass("pageloaded");
});