Index > JS > Add a script for slide number

assets/js/project-slideshow.js

@@ -18,6 +18,33 @@ document.addEventListener("DOMContentLoaded", () => {
   const firstSlideLastProject = firstSlide(lastProject);
   const lastSlideLastProject = lastSlide(lastProject);
 
+  // Affiche le numéro de la slide courante dans .slide-number > .current-image
+  // (le total est déjà géré en PHP via $slides->count()).
+  const updateSlideNumber = (project) => {
+    const slides = project.querySelectorAll(".project-slideshow > .slide");
+    const activeSlide = project.querySelector(
+      ".project-slideshow > .slide.active",
+    );
+    const currentImage = project.querySelector(".slide-number .current-image");
+    if (!currentImage || !activeSlide) return;
+    currentImage.textContent = [...slides].indexOf(activeSlide) + 1;
+  };
+
+  // On observe la classe .active de chaque slide : ainsi le numéro se met à
+  // jour quelle que soit la source du changement (navigation image/projet
+  // ici, ou ouverture d'un projet dans project-toggle.js).
+  projects.forEach((project) => {
+    updateSlideNumber(project); // état initial
+    project
+      .querySelectorAll(".project-slideshow > .slide")
+      .forEach((slide) =>
+        new MutationObserver(() => updateSlideNumber(project)).observe(slide, {
+          attributes: true,
+          attributeFilter: ["class"],
+        }),
+      );
+  });
+
   function goToNextPicture() {
     const selectedProject = document.querySelector(".project.selected");
     const activeSlide = selectedProject.querySelector(