JS > Index > Slideshow > change the logics

From: go to next project when slider end
To: loop on the same project when slider end

assets/css/style.css

@@ -376,6 +376,9 @@ body[data-template=index] .projects-index li section.toggle .project-slideshow .
 body[data-template=index] .projects-index .project-description-mobile {
   display: none;
 }
+body[data-template=index] .projects-index button.next-project {
+  display: none;
+}
 body[data-template=index] ul.projects-index {
   display: flex;
   flex-direction: column;
@@ -514,26 +517,14 @@ body[data-template=index] .project-slideshow-container {
   bottom: var(--body-margin);
   left: calc(var(--index-width) + var(--body-margin));
 }
-body[data-template=index] button.prev {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  border: none;
-  cursor: w-resize;
-  z-index: 1;
-  width: 50%;
-  left: 0;
-  padding: 0;
-}
 body[data-template=index] button.next {
   position: absolute;
   top: 0;
-  right: 0;
   height: 100%;
   border: none;
   cursor: e-resize;
   z-index: 1;
-  width: 50%;
+  width: 100%;
   padding: 0;
 }
 
@@ -711,12 +702,13 @@ body[data-template=index] button.next {
   body[data-template=index] .close-button.closer {
     position: fixed;
     top: var(--slider-height);
-    margin-top: calc(-1 * var(--font-size-L) - var(--body-margin));
+    margin-top: calc(-1 * var(--line-height-S) - var(--body-margin));
     right: var(--body-margin);
-    font-size: var(--font-size-L);
+    font-size: var(--font-size-S);
     cursor: pointer;
     mix-blend-mode: difference;
     color: var(--mix-blend-color);
+    min-height: 0 !important;
   }
   body[data-template=index] .close-button.closer::before {
     content: "Fermer";
@@ -772,7 +764,7 @@ body[data-template=index] button.next {
     position: absolute;
     top: 0;
     box-sizing: border-box;
-    width: calc(100vw - var(--body-margin));
+    width: 100vw;
     height: 100vh;
     overflow: auto;
     padding-right: 1.5rem;
@@ -816,6 +808,13 @@ body[data-template=index] button.next {
   body[data-template=index] .projects-index:has(.project.selected) .project:not(.selected) {
     display: none;
   }
+  body[data-template=index] .projects-index:has(.project.selected) button.next-project {
+    display: block;
+    width: 100%;
+    text-transform: capitalize;
+    text-decoration: underline;
+    text-align: right;
+  }
   body[data-template=infos] main {
     padding-top: var(--line-height-S);
   }

assets/js/project-slideshow.js

@@ -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();