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