Media

Before / After

A draggable before-and-after image comparison.

Live demo

See it in action

Design

Classic

A round drag handle on a divider line.

Before After

Design

Circle knob

A larger circular knob.

Before After

Design

Arrows

Chevrons, no knob ring.

Before After

Design

Minimal line

Just a thin divider — no handle.

Before After

Design

Invisible

No line or handle — drag anywhere on the image.

Before After

Design

Labeled badges

Before / After badges always shown.

Before After

Design

Framed card

A framed card with corner labels.

Before After

Behavior

Vertical

Drag up / down instead of left / right.

Before After

Behavior

Hover to compare

Follow the cursor — no dragging needed.

Before After

Behavior

Click to toggle

Crossfades the whole image on click / tap.

Before After

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="before-after fw-bac fw-bac--design-classic design-classic fw-bac--horizontal fw-bac--int-drag fw-bac--knob-md fw-bac--ratio-16-9 rounded" style="--bac-pos:50%;" role="slider" tabindex="0" aria-label="Before/after comparison: Before vs After" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" data-bac data-orientation="horizontal" data-interaction="drag" data-start="50" data-auto="1">
		<div class="fw-bac__media">
			<img class="fw-bac__sizer" src="https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-d0a1e0c8f106.jpg" alt="" aria-hidden="true" />
			<div class="fw-bac__layer fw-bac__after">
				<img src="https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-a51d92a21efc.jpg" alt="" loading="lazy" decoding="async" />
			</div>
			<div class="fw-bac__layer fw-bac__before">
				<img src="https://demos.unysonplus.com/wp-content/uploads/2026/09/demo-d0a1e0c8f106.jpg" alt="" loading="lazy" decoding="async" />
			</div>
			<span class="fw-bac__label fw-bac__label--before">Before</span>
			<span class="fw-bac__label fw-bac__label--after">After</span>
			<div class="fw-bac__handle" aria-hidden="true">
				<span class="fw-bac__line"></span>
				<span class="fw-bac__knob"><svg class="fw-bac__chev" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg><svg class="fw-bac__chev" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></span>
			</div>
		</div>
	</div>
</section>

To learn more about the Before / After shortcode, please check out the online manual here.