mahee-auffret/pages/index.vue

95 lines
2.4 KiB
Vue

<template>
<main>
<div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
<img
:src="`/imgs/large/${image.image_accueil}.webp`"
:alt="image.titre"
/>
</div>
</main>
</template>
<script>
export default {
setup() {
const itemsAccueil = ref([]);
const { data: itemsData } = useFetch('/api/items/images_accueil', { server: true });
onMounted(async () => {
if (itemsData.value) {
itemsAccueil.value = itemsData.value.data;
setTimeout(() => {
startSlider();
}, 1);
}
});
return {
itemsAccueil,
};
function startSlider() {
const imgs = document.querySelectorAll('.indexImg img');
const showingTime = 5000, transitionTime = 2000;
for (let img of imgs) {
img.addEventListener('click', function() {
nextSlide();
resetTimer();
});
img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
}
imgs[0].style.opacity = 1;
let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
let index = 1;
function nextSlide() {
if (index === 0) {
imgs[imgs.length - 1].style.opacity = 0;
imgs[index].style.opacity = 1;
} else {
imgs[index - 1].style.opacity = 0;
imgs[index].style.opacity = 1;
}
if (index === imgs.length - 1) {
index = 0;
} else {
index ++;
}
}
function resetTimer() {
clearInterval(diapoTimer);
diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
}
}
}
};
</script>
<style lang="scss">
.indexImg {
z-index: -1;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
object-fit: cover;
width: 100%;
height: 100%;
opacity: 0;
}
}
</style>