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' +} +