Before After Slider Image Comparison Block – Amitry

Description

Before After Slider adds a before and after image comparison slider to the WordPress block editor. Place two images, drag the divider, and reveal the difference between them. Use it as a native block, build reusable sliders in the admin and embed them with a shortcode, or add it with the Elementor widget.

Live demo: https://demo2.amitry.de
Discover more with Pro: https://amitry.de/amitry-before-after-slider/

Need more than one pair of images? Add further comparisons to the same block and they line up side by side, sharing a single design and aspect ratio.

Block editor, shortcode and Elementor

Add the slider the way that fits your site. It works as a native block in the WordPress block editor (Gutenberg), as a shortcode created from reusable sliders in the admin (Before/After Sliders), and as a dedicated Elementor widget. All three produce the same slider.

Where a before and after image slider helps

A before and after slider is a clear way to show change. Common uses include photo retouching and color grading, design mockups, renovation and repair work, fitness and beauty results, maps and satellite imagery, product customisation, and any other visual comparison. This image comparison block turns that reveal into an interactive, responsive and accessible slider.

Features

• Native block with a live, draggable preview in the editor.
• One block holds a single before and after comparison, or several side by side.
• Horizontal wipe or vertical reveal for the comparison slider.
• Optional hover mode so the slider follows the cursor instead of dragging.
• Design presets (Minimal, Classic, Bold, Soft, Dark) applied with one click.
• Controls for line width, handle size, corner radius, colors and labels.
• Width and alignment (left, centered, right) for a single comparison.
• Fixed aspect ratios so every comparison keeps the same shape.
• Keyboard accessible handle (arrow keys, Home, End) with ARIA slider semantics.
• Lightweight front end: vanilla JavaScript, lazy-loaded images, no external services and no tracking.
• Works with block themes and classic themes.
• Three ways to add it: the Gutenberg block editor, a shortcode for reusable sliders, and an Elementor widget.

For developers

• bacmpr_settings_schema filter to adjust the default design values.
• bacmpr_loaded action that fires after the plugin initialises.