92 lines
2.3 KiB
Vue
92 lines
2.3 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> |