<div class="container py-5 d-flex justify-content-center">
  <div class="card bics-card">
    <div class="card-body p-3">
      <div class="bics-frame" id="bicsFrame">
        <img src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&h=500&fit=crop" class="bics-img bics-before" alt="Before">
        <div class="bics-after-wrap" id="bicsAfterWrap">
          <img src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=800&h=500&fit=crop" class="bics-img bics-after" alt="After">
        </div>
        <div class="bics-handle" id="bicsHandle">
          <div class="bics-handle-btn">&#8596;</div>
        </div>
        <span class="badge text-bg-dark bics-label bics-label-left">Before</span>
        <span class="badge text-bg-dark bics-label bics-label-right">After</span>
      </div>
      <div class="text-center text-muted small mt-2" id="bicsPercent">50%</div>
    </div>
  </div>
</div>

.bics-card { width: 100%; max-width: 700px; border: 1px solid #eceef1; border-radius: 14px; }
.bics-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; user-select: none; }
.bics-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bics-after-wrap { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
.bics-after-wrap .bics-img { width: var(--bics-frame-width, 100%); max-width: none; }
.bics-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #fff; transform: translateX(-2px); cursor: ew-resize; box-shadow: 0 0 6px rgba(0,0,0,0.3); }
.bics-handle-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.bics-label { position: absolute; top: 10px; font-size: 0.7rem; }
.bics-label-left { left: 10px; }
.bics-label-right { right: 10px; }

const frame = document.getElementById('bicsFrame');
const afterWrap = document.getElementById('bicsAfterWrap');
const handle = document.getElementById('bicsHandle');
const afterImg = afterWrap.querySelector('.bics-img');
const percentLabel = document.getElementById('bicsPercent');

let dragging = false;

function setSplit(percent) {
  const clamped = Math.min(100, Math.max(0, percent));
  afterWrap.style.width = clamped + '%';
  handle.style.left = clamped + '%';
  afterImg.style.width = (frame.clientWidth) + 'px';
  percentLabel.textContent = Math.round(clamped) + '%';
}

function updateFromClientX(clientX) {
  const rect = frame.getBoundingClientRect();
  const x = clientX - rect.left;
  const percent = (x / rect.width) * 100;
  setSplit(percent);
}

handle.addEventListener('pointerdown', (e) => {
  dragging = true;
  handle.setPointerCapture(e.pointerId);
});

handle.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  updateFromClientX(e.clientX);
});

handle.addEventListener('pointerup', () => { dragging = false; });
handle.addEventListener('pointercancel', () => { dragging = false; });

// Clicking anywhere on the frame (not just dragging the handle) also jumps the split to that point.
frame.addEventListener('click', (e) => {
  if (dragging) return;
  updateFromClientX(e.clientX);
});

window.addEventListener('resize', () => {
  afterImg.style.width = frame.clientWidth + 'px';
});

setSplit(50);