harmonisation des styles

assets/js/home-investigations-slider.js

@@ -1,47 +0,0 @@
-import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
-
-export function initHomeInvestigationsSlider() {
-  const slider = document.querySelector('.home-investigations-slider');
-
-  if (!slider) {
-    return;
-  }
-
-  const swiper = new Swiper('.home-investigations-slider', {
-    // Optional parameters
-    slidesPerView: 1,
-    spaceBetween: 20,
-    speed: 600,
-
-    // Touch/Swipe settings
-    touchRatio: 1,
-    touchAngle: 45,
-    grabCursor: true,
-    simulateTouch: true,
-    allowTouchMove: true,
-
-    // Navigation arrows
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-
-    // Pagination
-    pagination: {
-      el: '.swiper-pagination',
-      clickable: true,
-    },
-
-    // Keyboard control
-    keyboard: {
-      enabled: true,
-    },
-
-    // Accessibility
-    a11y: {
-      prevSlideMessage: 'Investigation précédente',
-      nextSlideMessage: 'Investigation suivante',
-      paginationBulletMessage: 'Aller à l\'investigation {{index}}',
-    },
-  });
-}

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

assets/js/script.js

@@ -7,7 +7,7 @@ import { themeToggle } from './themeToggle.js';
 import { initHeroSlider } from './hero-slider.js';
 import { playVideo } from './hero-video.js';
 import { initDropdowns } from './dropdown.js';
-import { initHomeInvestigationsSlider } from './home-investigations-slider.js';
+import { initSwipers } from './swipers.js';
 import { report } from './report.js';
 
 
@@ -30,5 +30,5 @@ window.onload = async function () {
   initHeroSlider();
   playVideo();
   initDropdowns(responsiveSmall);
-  initHomeInvestigationsSlider();
+  // initSwipers();
 }

assets/js/swipers.js

@@ -0,0 +1,54 @@
+import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
+
+export function initSwipers(container = document) {
+  const sliders = container.querySelectorAll('.swiper');
+
+  if (sliders.length === 0) {
+    return;
+  }
+
+  sliders.forEach((sliderElement) => {
+    // Éviter de réinitialiser un swiper déjà initialisé
+    if (sliderElement.swiper) {
+      return;
+    }
+
+    const swiper = new Swiper(sliderElement, {
+      // Optional parameters
+      slidesPerView: 1,
+      spaceBetween: 20,
+      speed: 600,
+
+      // Touch/Swipe settings
+      touchRatio: 1,
+      touchAngle: 45,
+      grabCursor: true,
+      simulateTouch: true,
+      allowTouchMove: true,
+
+      // Navigation arrows
+      navigation: {
+        nextEl: sliderElement.querySelector('.swiper-button-next'),
+        prevEl: sliderElement.querySelector('.swiper-button-prev'),
+      },
+
+      // Pagination
+      pagination: {
+        el: sliderElement.querySelector('.swiper-pagination'),
+        clickable: true,
+      },
+
+      // Keyboard control
+      keyboard: {
+        enabled: true,
+      },
+
+      // Accessibility
+      a11y: {
+        prevSlideMessage: 'Investigation précédente',
+        nextSlideMessage: 'Investigation suivante',
+        paginationBulletMessage: 'Aller à l\'investigation {{index}}',
+      },
+    });
+  });
+}