56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{ images: { image: string; url?: string }[]; height?: number; interval?: number }>(),
|
|
{
|
|
height: 450,
|
|
interval: 4000,
|
|
},
|
|
);
|
|
|
|
const index = ref(0);
|
|
let timer: ReturnType<typeof setInterval> | null = null;
|
|
|
|
function go(i: number): void {
|
|
index.value = (i + props.images.length) % props.images.length;
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.images.length > 1) {
|
|
timer = setInterval(() => {
|
|
index.value = (index.value + 1) % props.images.length;
|
|
}, props.interval);
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (timer) clearInterval(timer);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full overflow-hidden" :style="{ height: `${height}px` }">
|
|
<NuxtLink
|
|
v-for="(img, i) in images"
|
|
v-show="i === index"
|
|
:key="img.image"
|
|
:to="img.url || '#'"
|
|
class="block h-full w-full bg-cover bg-center"
|
|
:style="{ backgroundImage: `url(${img.image})` }"
|
|
/>
|
|
<div
|
|
v-if="images.length > 1"
|
|
class="absolute right-0 bottom-[14px] left-0 flex justify-center gap-2"
|
|
>
|
|
<button
|
|
v-for="(_, i) in images"
|
|
:key="i"
|
|
type="button"
|
|
class="h-2.5 w-2.5 rounded-full bg-white/55 p-0 transition-colors"
|
|
:class="i === index ? 'bg-primary' : 'hover:bg-white/80'"
|
|
:aria-label="`slide ${i + 1}`"
|
|
@click="go(i)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|