boucle frise calendrier

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -288,7 +288,6 @@
 
   //////////////////// start Timeline script ///////////////////////
 
-
   document.addEventListener('DOMContentLoaded', function() {
     let currentSlide = 0;
   
@@ -297,9 +296,9 @@
       if (window.innerWidth <= 600) {
         return 1; // Show 1 slide on small screens
       } else if (window.innerWidth <= 900) {
-        return 4; // Show 2 slides on medium screens
+        return 4; // Show 4 slides on medium screens
       } else {
-        return 4; // Show 3 slides on large screens
+        return 4; // Show 4 slides on large screens
       }
     }
   
@@ -309,8 +308,14 @@
       const visibleSlides = getVisibleSlides();
       const maxSlide = totalSlides - visibleSlides;
   
-      // Adjust the index to ensure it stays within bounds
+      // Adjust the index to ensure it loops
-      currentSlide = Math.max(0, Math.min(index, maxSlide));
+      if (index > maxSlide) {
+        currentSlide = 0; // Go back to the first slide
+      } else if (index < 0) {
+        currentSlide = maxSlide; // Go to the last slide
+      } else {
+        currentSlide = index;
+      }
   
       // Calculate the offset for the transform
       const offset = currentSlide * -50 / visibleSlides;
@@ -321,10 +326,9 @@
         document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
       }
   
-
       // Enable/disable arrows based on the current slide
-      document.getElementById('arrowPrev').disabled = currentSlide === 0;
+      document.getElementById('arrowPrev').disabled = false; // Always enabled now
-      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
+      document.getElementById('arrowNext').disabled = false; // Always enabled now
     }
   
     function prevSlide() {
@@ -356,8 +360,8 @@
       }
     });
   
-// Fonction pour ajouter ou retirer la classe .only
+    // Fonction pour ajouter ou retirer la classe .only
-function updateDateClasses() {
+    function updateDateClasses() {
       document.querySelectorAll('.paragraph--type--phase-deroulement .date').forEach(function(dateElement) {
         const date2Element = dateElement.querySelector('.date2');
         const yearElement = dateElement.querySelector('.field_field_date_de_annee');
@@ -372,33 +376,30 @@ function updateDateClasses() {
           }
         }
       });
-}
+    }
   
-// Exécuter la fonction une première fois pour le contenu déjà présent
+    // Exécuter la fonction une première fois pour le contenu déjà présent
-updateDateClasses();
+    updateDateClasses();
   
-// MutationObserver pour surveiller les changements dans le DOM
+    // MutationObserver pour surveiller les changements dans le DOM
-const observer = new MutationObserver(function(mutationsList, observer) {
+    const observer = new MutationObserver(function(mutationsList, observer) {
       for(let mutation of mutationsList) {
         if (mutation.type === 'childList') {
           updateDateClasses();
         }
       }
-});
+    });
   
-// Configuration de l'observateur
+    // Configuration de l'observateur
-const config = { childList: true, subtree: true };
+    const config = { childList: true, subtree: true };
-
-// Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
-observer.observe(document.body, config);
   
+    // Démarrer l'observateur sur le document entier ou sur un conteneur spécifique
+    observer.observe(document.body, config);
   
     // Handle window resize
     window.addEventListener('resize', function() {
       showSlides(currentSlide); // Recalculate the slides on resize
     });
-  // });
-
   
     // Initialize
     showSlides(currentSlide);