harmonisation des styles

assets/js/report.js

@@ -1,16 +1,35 @@
+
+import { initSwipers } from './swipers.js';
+
 export function report(responsiveSmall) {
   if (document.body.dataset.template === 'report') {
-    console.log('report');
+
+    // Initialiser tous les sliders et swipers de la page
+    initSliderBeforeAfter();
+    initSwipers();
 
     // Ne fonctionne que pour les écrans plus grands que responsiveSmall
     if (window.matchMedia(responsiveSmall).matches) {
       return;
     }
-
     initMediaDisplay();
   }
 }
 
+
+function initSliderBeforeAfter(container = document){
+  const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
+  slidersBeforeAfter.forEach(function (sliderContainer, index) {
+    const sliderInput = sliderContainer.querySelector('.slider');
+    if (sliderInput) {
+      sliderInput.addEventListener('input', (e) => {
+        console.log('slider value:', e.target.value);
+        sliderContainer.style.setProperty('--position', `${e.target.value}%`);
+      });
+    }
+  });
+}
+
 function initMediaDisplay() {
   const reportMedias = document.querySelector('#report__medias');
   if (!reportMedias) return;
@@ -115,6 +134,10 @@ function initMediaDisplay() {
         // Ajouter le nouveau media
         reportMedias.appendChild(mediaData.media.cloneNode(true));
         currentMediaId = mediaId;
+
+        // Réinitialiser les sliders et swipers dans le media nouvellement inséré
+        initSliderBeforeAfter(reportMedias);
+        initSwipers(reportMedias);
       }
     } else {
       // Aucune ancre n'a encore franchi la ligne, vider le conteneur