图像不会在 Flickity 中加载，除非我调整浏览器的大小

Question

我正在做一个项目，出于某种原因，我在 Flickity 幻灯片中的图像仅在浏览器稍微调整大小时加载。这是我的网站：/

我在 Flickity 中将调整大小设置为 true，所以我不确定这里的问题是什么。任何帮助将不胜感激。

谢谢！

编辑：问题已解决！

Answer 1

因为您需要在 flickity 选项中添加 imagesLoaded 并包含图像加载的 flickity 库。

https://flickity.metafizzy.co/options.html#imagesloaded

Answer 2

如果其他人遇到此问题并且 imagesLoaded 对您没有影响，这是我的解决方案：

如果您碰巧将此滑块加载到模态框内，点击按钮时，模态框会从 display:none 变为显示：块——这也会给您带来错误，需要将屏幕大小调整为使轮播工作。

要解决此问题，请在隐藏模式上使用不透明度：0 而不是 display:none。单击按钮时，将模态更改为 opacity:1。

Answer 3

也添加到凯利的回答中。如果您在模态中有轻弹并且更改不透明度不是一个选项（即在我的情况下，我将相同的模型用于 garllery 显示和移动导航，切换每个功能的显示）。您也可以销毁 flickity 变量并重新初始化。例如在我的事件处理程序中我有：

if (/* condition for closing */) {
  event.preventDefault();
  lightbox.classList.remove('visible');
  flckty.destroy()
  lightboxCar.style.display = "none";
}

else if (/* condition for opening carousel */) {
  lightboxCar.style.display = "initial";
  var pageImgs = document.querySelector("main").getElementsByTagName("img");
  flckty = new Flickity( '#lightbox-carousel', {
    // options
    "cellAlign": 'center',
    });

其中 lightboxCar 是页面上的轮播项目。

Answer 4

也许不透明度不适合您，如果您愿意，可以使用这种方式：

.hide{
    transform: translateY(-1000em);
    position: absolute;
}

.show{
    transform: none;
    position: relative;
}

使用 JQuery 或 JS...

切换此 class

Answer 5

如果您仍然需要动态加载图库并且不透明度不是您项目的最佳选择，请在加载后尝试 resize 方法，或者在您的打开事件处理程序中像这样:

$('.open--modal').on( 'click', function() {
    $carousel.flickity('resize');
});

阅读更多https://flickity.metafizzy.co/api.html#resize

图像不会在 Flickity 中加载，除非我调整浏览器的大小

Images won't load in Flickity unless I resize the browser

html

css

jquery

flickity