Question

我正在处理一个项目，无论出于什么原因，我在Flickity幻灯片中的图片只在浏览器稍微调整大小时加载。这是我的网站：/

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

谢谢！

编辑：问题解决了！

Answer 1

万一其他人遇到这个问题并且imagesLoaded对您没有影响，这就是我的解决方案：

如果您恰好将此滑块加载到单击按钮后的模态中，模态将从display：none更改为display：block-这也会给您带来错误，需要调整屏幕大小以使轮播工作

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

Answer 2

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

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

Answer 3

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

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

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

使用 JQuery 或 JS 切换这个类...

Answer 4

还要添加到凯利的答案中。如果您在模式中有轻拂感，并且不更改不透明度是一种选择（即，在我的情况下，我将相同的模型用于车库展示和移动导航，切换每个功能的显示）。您还可以销毁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是页面上的轮播项目。

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

4 个答案: