83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<main>
|
|
<div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
|
|
<NuxtImg
|
|
:src="img(image.image_accueil)"
|
|
:alt="image.titre"
|
|
format="webp"
|
|
placeholder
|
|
lazy
|
|
sizes="sm:150vw" />
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { getItems } = useDirectusItems();
|
|
|
|
const itemsAccueil = await getItems({
|
|
collection: "images_accueil"
|
|
});
|
|
|
|
const { getThumbnail : img } = useDirectusFiles();
|
|
|
|
onMounted(() => {
|
|
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> |