לפני ואחרי

הידית היא 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>