Image Comparison Block – Before After Image Slider

Image Comparison Block is a lightweight before and after image comparison slider for the WordPress block editor (Gutenberg). Place two images on top of each other and let visitors drag, click or swipe the handle to reveal the difference.

It is built with native block editor components, has no jQuery or third-party JavaScript libraries, and loads its tiny front-end script only on pages that actually use the block, so it will not slow down the rest of your site.

See Live Demos

Perfect For

A before/after slider is the clearest way to show a transformation. Use it for:

• Photographers and retouchers: original vs. edited photos, color grading, RAW vs. final.
• Designers and agencies: old website vs. redesign, mockup vs. final product.
• Real estate and interior design: home staging, renovation and remodeling results.
• Construction, landscaping and cleaning services: project progress and results.
• Beauty, cosmetics, dental and fitness: treatment and transformation results.
• Car detailing and restoration: before and after the job.
• Education and science: maps, satellite images and changes over time.
• Product reviews: compare screenshots, settings or image quality side by side.

Key Features

• Lightweight and fast: no jQuery or external libraries. Assets load only where the block is used.
• Native Gutenberg block: built with core block editor components, works with any block theme or classic theme, including the Site Editor (FSE).
• Horizontal and vertical comparison modes.
• Drag, click or swipe to compare. Touch friendly, without blocking page scrolling on mobile.
• Optional move on hover mode.
• Adjustable starting position of the slider.
• Optional before and after labels, always visible or shown on hover.
• Handle styles: circle, square or line, with custom color, background, size and line width.
• Label styles: position, text color, background and font size.
• Border, rounded corners, box shadow and aspect ratio (crops both images evenly).
• Wide and full width alignment, margin controls and HTML anchors.
• Responsive images with srcset and sizes for images from the Media Library.
• Accessible: keyboard operable handle (arrow keys, Page Up/Down, Home/End), announced as a slider to screen readers, and respects the “reduce motion” setting.
• Live, interactive preview in the editor.
• Swap or replace images from the block toolbar, with alt text controls for SEO.
• Use multiple comparison sliders on the same page.
• Translation ready.

How to Use

1. Add the Image Compare block from the Media category, or type /image compare in the editor.
2. Choose a before image and an after image from the Media Library.
3. Pick the orientation, starting position, labels and styles from the block sidebar.
4. Publish. Your before/after slider is live.

Why Image Comparison Block?

Many image comparison plugins depend on jQuery, page builders or heavy sliders. Image Comparison Block is a single, focused block that does one thing well: a fast, accessible and good-looking before and after image slider that fits right into the block editor.