Hacky fix for carousel
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 1m52s
All checks were successful
Build and deploy updated apps / Build & deploy (push) Successful in 1m52s
This commit is contained in:
parent
b8ec6af312
commit
1025cc0786
@ -34,11 +34,22 @@ 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 -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user