4

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

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

谢谢！

编辑：问题解决了！

4

5 回答 5

4

如果其他人遇到这种情况并且 imagesLoaded 对您没有任何影响，这是我的解决方案：

如果您碰巧在单击按钮时在模态中加载此滑块，则模态会从 display:none 更改为 display: block - 这也会给您带来需要调整屏幕大小以使轮播工作的错误。

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

于 2020-10-06T06:53:17.110 回答
3

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

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

于 2018-01-27T00:39:47.747 回答
1

还要补充凯利的答案。如果您在模态中具有轻弹并且无法选择更改不透明度（即，在我的情况下，我对画廊显示和移动导航使用相同的模型，切换每个功能的显示）。您还可以销毁 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页面上的轮播项目在哪里。

于 2020-11-20T20:20:50.870 回答
1

如果您仍然需要动态加载画廊并且不透明度不是您项目的最佳选择，请在加载后尝试resize方法，或者在您的打开事件处理程序中，如下所示：

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

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

于 2021-11-08T00:13:46.007 回答
1

也许不透明度对您来说并不完美，如果您喜欢，请使用这种方式：

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

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

使用 JQuery 或 JS 切换此类...

于 2021-04-02T20:48:02.897 回答