<script setup>
import { ref } from "vue";

const images = ["image0.jpg","image0.jpg","image0.jpg"];
const currentIndex = ref(2);

setInterval(() => {
  currentIndex.value = (currentIndex.value + 1) % images.length;
}, 10000);
</script>

<template>
  <div class="bg">
    <img
      :class="currentIndex === index ? 'active' : ''"
      v-for="(item, index) in images"
      :key="item"
      :src="item"
    />
  </div>
</template>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease-in-out;
  opacity: 0;
}

.bg img.active {
  opacity: 1;
}
</style>
