41 lines
997 B
Vue
41 lines
997 B
Vue
<template>
|
|
<div class="flex flex-col h-full">
|
|
<div class="relative h-[60vh] w-full flex items-center justify-center">
|
|
<!-- Image -->
|
|
<NuxtImg
|
|
v-if="gallery[currentIndex]"
|
|
:src="'/' + bucket + '/' + gallery[currentIndex].image"
|
|
class="max-w-full max-h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Dots indicator -->
|
|
<div v-if="gallery.length > 1" class="flex gap-2 py-2 justify-center">
|
|
<button
|
|
v-for="(img, index) in gallery"
|
|
:key="index"
|
|
@click="currentIndex = index"
|
|
class="w-2 h-2 rounded-full transition-colors"
|
|
:class="index === currentIndex ? 'bg-gray-600' : 'bg-gray-300'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
bucket: String,
|
|
gallery: Array,
|
|
initialIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
|
|
const currentIndex = ref(props.initialIndex)
|
|
|
|
watch(() => props.initialIndex, (newVal) => {
|
|
currentIndex.value = newVal
|
|
})
|
|
</script>
|