63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="flex flex-col items-center justify-center h-full">
|
||
|
|
<div class="relative w-full flex-1 flex items-center justify-center min-h-0 p-4">
|
||
|
|
<!-- Previous button -->
|
||
|
|
<button
|
||
|
|
v-if="gallery.length > 1"
|
||
|
|
@click="prev"
|
||
|
|
class="absolute left-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
<Icon name="mdi:chevron-left" class="w-6 h-6" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Image -->
|
||
|
|
<NuxtImg
|
||
|
|
v-if="gallery[currentIndex]"
|
||
|
|
:src="'/' + bucket + '/' + gallery[currentIndex].image"
|
||
|
|
class="max-w-full max-h-[60vh] object-contain"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- Next button -->
|
||
|
|
<button
|
||
|
|
v-if="gallery.length > 1"
|
||
|
|
@click="next"
|
||
|
|
class="absolute right-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
<Icon name="mdi:chevron-right" class="w-6 h-6" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Dots indicator -->
|
||
|
|
<div v-if="gallery.length > 1" class="flex gap-2 py-2">
|
||
|
|
<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)
|
||
|
|
|
||
|
|
const next = () => {
|
||
|
|
currentIndex.value = (currentIndex.value + 1) % props.gallery.length
|
||
|
|
}
|
||
|
|
|
||
|
|
const prev = () => {
|
||
|
|
currentIndex.value = (currentIndex.value - 1 + props.gallery.length) % props.gallery.length
|
||
|
|
}
|
||
|
|
</script>
|