Come creare un effetto “Before & After” con due immagini (senza plugin) in WordPress

<div class="before-after-container">
  <img src="https://tuosito.com/path/prima.jpg" alt="Prima" class="before-img">
  <img src="https://tuosito.com/path/dopo.jpg" alt="Dopo" class="after-img">
  <div class="slider-handle"></div>
  <span class="label before">Prima</span>
  <span class="label after">Dopo</span>
</div>

<style>
.before-after-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 40px auto;
  user-select: none;
  touch-action: none;
}

.before-after-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.after-img {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.1s ease;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background: white;
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  cursor: ew-resize;
  z-index: 10;
}

.label {
  position: absolute;
  top: 10px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 14px;
  border-radius: 4px;
  z-index: 20;
  transition: opacity 0.3s ease;
}

.label.before { left: 10px; }
.label.after { right: 10px; }

/* 👇 Le etichette scompaiono durante il trascinamento */
.before-after-container.dragging .label {
  opacity: 0;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const container = document.querySelector('.before-after-container');
  const afterImg = container.querySelector('.after-img');
  const handle = container.querySelector('.slider-handle');
  let isDragging = false;

  function updatePosition(x) {
    const rect = container.getBoundingClientRect();
    let pos = x - rect.left;
    pos = Math.max(0, Math.min(pos, rect.width));
    const percent = (pos / rect.width) * 100;
    afterImg.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
    handle.style.left = percent + '%';
  }

  // Desktop
  handle.addEventListener('mousedown', () => { 
    isDragging = true; 
    container.classList.add('dragging');
  });
  window.addEventListener('mouseup', () => { 
    isDragging = false; 
    container.classList.remove('dragging');
  });
  window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    updatePosition(e.clientX);
  });

  // Mobile
  handle.addEventListener('touchstart', () => { 
    isDragging = true; 
    container.classList.add('dragging');
  }, { passive: true });
  window.addEventListener('touchend', () => { 
    isDragging = false; 
    container.classList.remove('dragging');
  });
  window.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    updatePosition(e.touches[0].clientX);
  });
});
</script>