WordPress block – free

Before and after, in one drag.

A native block that turns two images into an interactive comparison slider. Set it up visually, add as many comparisons as you like, and ship a fast, accessible reveal, no page builder required.

Free forever  ·  No tracking  ·  Works with block and classic themes
Real block, running live. Drag the handle.try me
Setup
Two clicks to a slider
Pick a before and after image. The live preview appears instantly.
Performance
Lightweight on the page
Vanilla JavaScript, lazy-loaded images, zero external requests.
Access
Keyboard and screen reader
A real slider role with arrow-key control and focus states.
Features

Everything the comparison needs, nothing it doesn’t

Designed for the block editor, tuned for the front end.

Native block

A live, draggable preview right in the editor. No shortcodes, no separate settings screen.

One or many

A single comparison, or several lined up side by side in the very same block.

Horizontal or vertical

Wipe left to right or reveal top to bottom. Handle, labels and keys follow along.

Design presets

Minimal, Classic, Bold, Soft and Dark with one click. Then fine-tune every detail.

Width and alignment

Size a single comparison and align it left, centered or right. Pick a fixed aspect ratio.

Accessible and light

Keyboard control, ARIA slider semantics, lazy images and no external services.

How it works

From empty block to live reveal in three steps

Add the block

Insert „Before After Compare“ in any post or page.

Pick two images

Choose a before and an after image. The preview updates as you go.

Drag and extend

Pull the handle to compare. Use the plus in the toolbar to add more comparisons.

See it live

The block, doing its thing

A couple of examples below. The full playground has every variant.

Color grade, with labelslabels
City, day to nightvertical
FAQ

Good to know

Do I need a page builder?

No. The block works in the standard WordPress block editor.

How do I show several comparisons side by side?

Select the block and use the plus button in the toolbar, or the Add comparison button in the settings. They share one design and aspect ratio, and stack on phones.

Can I make a single slider smaller or align it?

Yes. With a single comparison, the Layout panel offers a width control and left, centered or right alignment.

Can the slider move on hover instead of dragging?

Yes, switch on Move on hover. Touch devices keep the drag.

Does it load anything from outside my site?

No. All assets are served from your own site, with no external services and no tracking.

Add it to your site today

Free, native and fast. Install from the WordPress directory and place your first comparison in minutes.