לפני ואחרי

הידית היא input range שקוף מעל התמונות, ולא גרירה שנכתבה ביד. כך מגע, מקלדת וקורא מסך עובדים בלי שורת קוד נוספת — הקוד רק מעביר את הערך ל-clip-path. מתאים למספרות, שיפוצים, קליניקות ועיצוב. לפני ואחרי הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · תמונות · נגישות · בלי ספריות

<!-- לפני ואחרי — החליפו את שתי כתובות התמונה -->
<style>
  .klix-ba { position: relative; overflow: hidden; border-radius: 1rem; width: 100%; max-width: 24rem }
  .klix-ba img, .klix-ba .klix-ba-layer { display: block; width: 100%; height: 100% }
  .klix-ba .klix-ba-layer { position: absolute; inset: 0; object-fit: cover }
  .klix-ba-line { position: absolute; inset-block: 0; width: 3px; background: rgba(255,255,255,.9);
    pointer-events: none; transform: translateX(-50%) }
  .klix-ba input { position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: ew-resize }
</style>

<div class="klix-ba">
  <img src="לפני.jpg" alt="לפני הטיפול">
  <img class="klix-ba-layer" src="אחרי.jpg" alt="" aria-hidden="true">
  <div class="klix-ba-line"></div>
  <input type="range" min="0" max="100" value="50" aria-label="הזזת קו ההשוואה">
</div>

<script>
(function () {
  document.querySelectorAll('.klix-ba').forEach(function (box) {
    var top = box.querySelector('.klix-ba-layer');
    var line = box.querySelector('.klix-ba-line');
    var input = box.querySelector('input');
    if (!top || !line || !input) return;

    function update() {
      var v = input.value;
      top.style.clipPath = 'inset(0 0 0 ' + v + '%)';
      line.style.insetInlineStart = v + '%';
    }

    input.addEventListener('input', update);
    update();
  });
})();
</script>