js timeline

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

@@ -97,39 +97,42 @@ $( document ).ready(function() {
 
 ////////////////// Timeline ///////////////////////
 
-// let currentSlide = 0;
+document.addEventListener('DOMContentLoaded', function() {
+  let currentSlide = 0;
 
-// function showSlides(index) {
-//     const slides = document.querySelectorAll('.__timeline-content');
-//     const totalSlides = slides.length;
-//     const visibleSlides = 3; // Number of slides to show at a time
-//     const maxSlide = totalSlides - visibleSlides;
-    
-//     // Adjust the index to ensure it stays within bounds
-//     currentSlide = Math.max(0, Math.min(index, maxSlide));
+  function showSlides(index) {
+      const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
+      const totalSlides = slides.length;
+      const visibleSlides = 3; // Number of slides to show at a time
+      const maxSlide = totalSlides - visibleSlides;
 
-//     // const offset = currentSlide * -40; // Calculate the offset for the transform
-//     document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;
+      // Adjust the index to ensure it stays within bounds
+      currentSlide = Math.max(0, Math.min(index, maxSlide));
 
-//     // Enable/disable arrows based on the current slide
-//     document.querySelector('.arrow__prev').disabled = currentSlide === 0;
-//     document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;
-// }
+      // Calculate the offset for the transform
+      const offset = currentSlide * -100 / visibleSlides;
+      document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
 
-// function prevSlide() {
-//     showSlides(currentSlide - 1);
-// }
-
-// function nextSlide() {
-//     showSlides(currentSlide + 1);
-// }
-
-// // Initialize
-// showSlides(currentSlide);
+      // Enable/disable arrows based on the current slide
+      document.getElementById('arrowPrev').disabled = currentSlide === 0;
+      document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
+  }
 
+  function prevSlide() {
+      showSlides(currentSlide - 1);
+  }
 
+  function nextSlide() {
+      showSlides(currentSlide + 1);
+  }
 
+  // Attach event listeners
+  document.getElementById('arrowPrev').addEventListener('click', prevSlide);
+  document.getElementById('arrowNext').addEventListener('click', nextSlide);
 
+  // Initialize
+  showSlides(currentSlide);
+});
 
 })(jQuery, window);
 

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss

@@ -12,13 +12,18 @@
             width: fit-content;
             margin: auto;
             position: relative;
-            top: -220px;
+            top: -115px;
             button{
                 background-color: white;
                 border: none; 
                 &:hover{
                     opacity: 0.5;
-                }           }
+                } 
+                svg{
+                    padding: 0.5rem;
+
+                }
+            }
         }
         .__timeline-content{
             // font-size: 0;