除非我調整瀏覽器大小，否則圖像不會在 Flickity 中加載

Question

我正在做一個項目，無論出於何種原因，我在 Flickity 幻燈片中的圖像只有在瀏覽器稍微調整大小時才會加載。 這是我的網站：/

我在 Flickity 中將 resize 設置為 true，所以我不確定這里的問題是什么。 任何幫助將不勝感激。

謝謝！

編輯：問題解決了！

Answer 1

如果其他人遇到這個問題並且 imagesLoaded 對您沒有影響，這是我的解決方案：

如果您碰巧在單擊按鈕的模式中加載此滑塊，則模式將從 display:none 更改為 display:block —— 這也會給您帶來需要調整屏幕大小以使輪播工作的錯誤。

要解決此問題，請在隱藏模式上使用 opacity: 0 而不是 display:none 。 單擊按鈕后，將模式更改為 opacity:1。

Answer 2

因為您需要在您的輕彈選項中添加 imagesLoaded 並包含加載的輕彈庫的圖像。

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是頁面上的輪播項目。

Answer 5

如果您仍然需要動態加載圖庫並且不透明度不是您項目的最佳選擇，請在加載后嘗試調整大小方法，或在您的打開事件處理程序中嘗試如下：

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

閱讀更多https://flickity.metafizzy.co/api.html#resize

Answer 6

我知道這個線程很舊，但我找到了一個更好的解決方案（我認為）：而不是使用 opacity 使用帶有display:none的 class ，然后你刪除了 class 使用setInterval(() => {swiper.resize()}, 1); . 它在我的情況下完美運行。