From b8ec6af3124eb338cfc054be6d21170866ae5be2 Mon Sep 17 00:00:00 2001
From: Dominik Milacher <code@dominikmilacher.com>
Date: Thu, 16 Oct 2025 13:51:32 +0200
Subject: [PATCH] Hacky fix for carousel

---
 .../components/AppThumbnailCarousel.vue           | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue b/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue
index b0bb92f..f64039f 100644
--- a/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue
+++ b/apps/panoramablick-saalbach.at/components/AppThumbnailCarousel.vue
@@ -26,11 +26,24 @@ function select(index: number) {
   carousel.value?.emblaApi?.scrollTo(index)
 }
 
+// Weird stuff is going on here.
+// - If the page loads slowly, some images are not shown in the carousel viewport
+// - However they are visible when dragging left or right
+// - When removing overflow-hidden from the direct parent of the images row all are visible
+// - Potentially only happens when auto-height plugin is used
+// - When resizing the window suddenly all images become visible
+// - Updating the key to force to re-render is just a hack
 
+const loaded = Object.fromEntries(props.images.map(img => [img, ref(img)]))
+
+function setLoaded(item) {
+  loaded[item].value = item + 'loaded'
+}
 
 </script>
 
 
+
 <template>
   <div class="flex flex-col items-center justify-start p-4">
     <!-- main slider -->
@@ -51,7 +64,7 @@ function select(index: number) {
         class="relative w-full"
         @select="onSelect"
     >
-      <NuxtImg :src="item" class="object-cover" alt="Bild" preload/>
+      <NuxtImg :key="loaded[item]" :src="item" class="object-cover" alt="Bild" preload @load="setLoaded(item)"/>
     </UCarousel>
 
     <!-- thumbnails -->