Hacky fix for carousel
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 1m52s

This commit is contained in:
Dominik Milacher 2025-10-16 14:13:42 +02:00
parent b8ec6af312
commit 1025cc0786

View File

@ -34,12 +34,23 @@ function select(index: number) {
// - 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)]))
const version = ref(0)
const loaded = new Set<string>()
function setLoaded(item) {
loaded[item].value = item + 'loaded'
function updateVersion(img) {
if (!loaded.has(img)) {
loaded.add(img)
++version.value
console.log("update version", version.value)
}
}
// const loaded = Object.fromEntries(props.images.map(img => [img, ref(img)]))
//
// function setLoaded(item) {
// loaded[item].value = item + 'loaded'
// }
</script>
@ -48,6 +59,7 @@ function setLoaded(item) {
<div class="flex flex-col items-center justify-start p-4">
<!-- main slider -->
<UCarousel
:key="version"
ref="carousel"
auto-height
arrows
@ -64,7 +76,7 @@ function setLoaded(item) {
class="relative w-full"
@select="onSelect"
>
<NuxtImg :key="loaded[item]" :src="item" class="object-cover" alt="Bild" preload @load="setLoaded(item)"/>
<NuxtImg :src="item" class="object-cover" alt="Bild" preload @load="updateVersion(item)"/>
</UCarousel>
<!-- thumbnails -->