mahee-auffret/pages/index.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>