studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

JS > Index > Slideshow > change the logics

Browse source 
From: go to next project when slider end
To: loop on the same project when slider end
This commit is contained in:
camille 2026-07-01 17:38:56 +02:00
parent df55fc2439
commit 7239ec8c16
3 changed files with 21 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

37
assets/js/project-slideshow.js
View file

@ -1,15 +1,11 @@
document.addEventListener("DOMContentLoaded", () => {
// Éléments statiques : calculés une seule fois au chargement
const prevButtons = document.querySelectorAll("button.prev");
const nextButtons = document.querySelectorAll("button.next");
const projects = document.querySelectorAll(".projects-index .project");
const firstProject = projects[0];
const lastProject = projects[projects.length - 1];
// Première / dernière slide d'un projet (image OU vidéo).
// On cible la classe « .slide » au lieu de la balise « picture »
// pour que les vidéos comptent comme des slides normales.
const firstSlide = (project) =>
project.querySelector(".project-slideshow > .slide");
const lastSlide = (project) => {
@ -21,9 +17,6 @@ document.addEventListener("DOMContentLoaded", () => {
const firstSlideLastProject = firstSlide(lastProject);
const lastSlideLastProject = lastSlide(lastProject);
// Fonctions de navigation : les éléments « courants » sont re-requêtés
// à chaque appel pour refléter l'état actuel du DOM.
function goToNextPicture() {
const selectedProject = document.querySelector(".project.selected");
const activeSlide = selectedProject.querySelector(
@ -32,19 +25,11 @@ document.addEventListener("DOMContentLoaded", () => {
const lastSlideSelected = lastSlide(selectedProject);
const nextProject = selectedProject.nextElementSibling;
activeSlide.classList.remove("active");
if (activeSlide !== lastSlideSelected) {
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
selectedProject.classList.remove("selected");
activeSlide.classList.remove("active");
if (selectedProject !== lastProject) {
nextProject.classList.add("selected");
firstSlide(nextProject).classList.add("active");
} else {
firstProject.classList.add("selected");
firstSlideFirstProject.classList.add("active");
}
firstSlide(selectedProject).classList.add("active");
}
}
@ -56,19 +41,11 @@ document.addEventListener("DOMContentLoaded", () => {
const firstSlideSelected = firstSlide(selectedProject);
const prevProject = selectedProject.previousElementSibling;
activeSlide.classList.remove("active");
if (activeSlide !== firstSlideSelected) {
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
} else {
selectedProject.classList.remove("selected");
activeSlide.classList.remove("active");
if (selectedProject !== firstProject) {
prevProject.classList.add("selected");
lastSlide(prevProject).classList.add("active");
} else {
lastProject.classList.add("selected");
lastSlideLastProject.classList.add("active");
}
lastSlide(selectedProject).classList.add("active");
}
}
@ -112,10 +89,6 @@ document.addEventListener("DOMContentLoaded", () => {
nextButton.addEventListener("click", goToNextPicture);
});
prevButtons.forEach((prevButton) => {
prevButton.addEventListener("click", goToPrevPicture);
});
document.addEventListener("keyup", (event) => {
if (event.key === "ArrowRight") goToNextPicture();
if (event.key === "ArrowLeft") goToPrevPicture();