Slider avant / après

001<script>
002document.addEventListener('DOMContentLoaded', function() {
003  document.querySelectorAll('.before-after').forEach(container => {
004    const beforeImg = container.querySelector('.before');
005    const afterImg = container.querySelector('.after');
006    
007    if (!beforeImg || !afterImg) return;
008    
009    // S'assurer que le conteneur a la bonne position
010    if (getComputedStyle(container).position === 'static') {
011      container.style.position = 'relative';
012    }
013    
014    // Créer le divider
015    const divider = document.createElement('div');
016    divider.className = 'slider-divider';
017    divider.innerHTML = `
018      <div class="slider-line" style="
019        position: absolute;
020        top: 0;
021        left: 50%;
022        transform: translateX(-50%);
023        width: 2px;
024        height: 100%;
025        background: white;
026        z-index: 10;
027        box-shadow: 0 0 10px rgba(0,0,0,0.3);
028        pointer-events: none;
029      "></div>
030      <div class="slider-handle" style="
031        position: absolute;
032        top: 50%;
033        left: 50%;
034        transform: translate(-50%, -50%);
035        width: 40px;
036        height: 40px;
037        background: white;
038        border-radius: 50%;
039        display: flex;
040        align-items: center;
041        justify-content: center;
042        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
043        z-index: 11;
044        cursor: grab;
045        transition: transform 0.2s ease;
046        pointer-events: all;
047      ">
048        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
049          <path d="m9 7-5 5 5 5"/>
050          <path d="m15 7 5 5-5 5"/>
051        </svg>
052      </div>
053    `;
054    
055    divider.style.cssText = `
056      position: absolute;
057      top: 0;
058      left: 50%;
059      transform: translateX(-50%);
060      height: 100%;
061      z-index: 10;
062      pointer-events: none;
063    `;
064    
065    container.appendChild(divider);
066    
067    const sliderHandle = divider.querySelector('.slider-handle');
068    
069    // Variables
070    let isDragging = false;
071    
072    // Fonction de mise à jour
073    function updateSlider(percentage) {
074      const clampedPercentage = Math.max(0, Math.min(100, percentage));
075      const rightClip = 100 - clampedPercentage;
076      
077      beforeImg.style.clipPath = `inset(0 ${rightClip}% 0 0)`;
078      divider.style.left = clampedPercentage + '%';
079    }
080    
081    // Fonction pour obtenir la position X
082    function getPositionX(e) {
083      return e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
084    }
085    
086    // Fonction pour calculer le pourcentage
087    function calculatePercentage(clientX) {
088      const rect = container.getBoundingClientRect();
089      const x = clientX - rect.left;
090      return (x / rect.width) * 100;
091    }
092    
093    // Events pour le drag
094    function handleStart(e) {
095      if (!sliderHandle.contains(e.target)) return;
096      
097      e.preventDefault();
098      isDragging = true;
099      
100      sliderHandle.style.cursor = 'grabbing';
101      document.body.style.userSelect = 'none';
102      
103      beforeImg.style.transition = 'none';
104      divider.style.transition = 'none';
105    }
106    
107    function handleMove(e) {
108      if (!isDragging) return;
109      
110      e.preventDefault();
111      const clientX = getPositionX(e);
112      const percentage = calculatePercentage(clientX);
113      updateSlider(percentage);
114    }
115    
116    function handleEnd(e) {
117      if (!isDragging) return;
118      
119      isDragging = false;
120      sliderHandle.style.cursor = 'grab';
121      document.body.style.userSelect = '';
122    }
123    
124    // Event listeners
125    sliderHandle.addEventListener('mousedown', handleStart);
126    document.addEventListener('mousemove', handleMove);
127    document.addEventListener('mouseup', handleEnd);
128    
129    // Touch events
130    sliderHandle.addEventListener('touchstart', handleStart);
131    document.addEventListener('touchmove', handleMove, { passive: false });
132    document.addEventListener('touchend', handleEnd);
133    
134    // Clic sur le conteneur pour positionner
135    container.addEventListener('click', (e) => {
136      if (isDragging || sliderHandle.contains(e.target)) return;
137      
138      const percentage = calculatePercentage(e.clientX);
139      beforeImg.style.transition = 'clip-path 0.3s ease';
140      divider.style.transition = 'left 0.3s ease';
141      updateSlider(percentage);
142      
143      setTimeout(() => {
144        beforeImg.style.transition = 'none';
145        divider.style.transition = 'none';
146      }, 300);
147    });
148    
149    // Hover sur la poignée
150    sliderHandle.addEventListener('mouseenter', () => {
151      if (!isDragging) {
152        sliderHandle.style.transform = 'translate(-50%, -50%) scale(1.1)';
153      }
154    });
155    
156    sliderHandle.addEventListener('mouseleave', () => {
157      if (!isDragging) {
158        sliderHandle.style.transform = 'translate(-50%, -50%) scale(1)';
159      }
160    });
161    
162    // Initialiser la position
163    updateSlider(50);
164  });
165});
166</script>