index-main/assets/js/report.js

import { initSwipers } from './swipers.js';

export function report(responsiveSmall) {
  if (document.body.dataset.template === 'report') {

    // Initialiser tous les sliders de type before-after
    initSliderBeforeAfter();

    // Ne fonctionne que pour les écrans plus grands que responsiveSmall
    if (window.matchMedia(responsiveSmall).matches) {
      // Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
      initSwipers();
      return;
    }


  }
}


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}%`);
      });
    }
  });
}