@cloudimage/before-after

Image Before After

Interactive image comparison slider with zoom & pan, drag/hover/click modes, and full accessibility. Zero dependencies, under 12 KB gzipped.

Get Started GitHub

<12 KB Zero Dependencies TypeScript React WCAG 2.1 AA

Quick Start

Up and running in under a minute

Install from npm or load from CDN — choose the method that fits your workflow.

Try it live Vanilla React

Install via npm

npm install @cloudimage/before-after

import CIBeforeAfter from '@cloudimage/before-after';

new CIBeforeAfter('#my-slider', {
  beforeSrc: '/before.jpg',
  afterSrc: '/after.jpg',
});

Use via CDN

<script src="https://cdn.cloudimage.io/before-after/1.0.4/before-after.min.js"></script>

<div
  data-ci-before-after-before-src="/before.jpg"
  data-ci-before-after-after-src="/after.jpg"
></div>

<script>CIBeforeAfter.autoInit();</script>

Interactions

Interaction Modes

Choose how the slider responds: drag for precision, hover for preview, or click for quick comparison.

✊ Drag

Click and drag the handle to compare images.

👁 Hover

Move the mouse over the image to reveal.

👆 Click

Click anywhere to set the comparison point.

Layout

Orientations

Compare images side-by-side or top-to-bottom.

Horizontal

Vertical

Theming

Light & Dark Themes

Built-in light and dark themes with full CSS custom property support.

Light (Default)

Dark

Advanced

Zoom & Pan

Hold Ctrl (or ⌘) + scroll to zoom. Drag to pan when zoomed in.

Playground

Interactive Configurator

Toggle options and see the generated code update in real time.