Title: Before After Slider Image Comparison Block – Amitry Author: amitry Published: June 19, 2026 Last modified: June 21, 2026 --- Search plugins ![](https://ps.w.org/amitry-before-after-slider/assets/banner-772x250.png?rev=3580606) ![](https://ps.w.org/amitry-before-after-slider/assets/icon-256x256.gif?rev=3579055) # Before After Slider Image Comparison Block – Amitry By [amitry](https://profiles.wordpress.org/amitry/) [Download](https://downloads.wordpress.org/plugin/amitry-before-after-slider.1.1.0.zip) * [Details](https://wordpress.org/plugins/amitry-before-after-slider/#description) * [Reviews](https://wordpress.org/plugins/amitry-before-after-slider/#reviews) * [Installation](https://wordpress.org/plugins/amitry-before-after-slider/#installation) * [Development](https://wordpress.org/plugins/amitry-before-after-slider/#developers) [Support](https://wordpress.org/support/plugin/amitry-before-after-slider/) ## 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. ## Screenshots [⌊The before and after slider on the front end.⌉⌊The before and after slider on the front end.⌉[ The before and after slider on the front end. [⌊Editing the block and choosing images in the editor.⌉⌊Editing the block and choosing images in the editor.⌉[ Editing the block and choosing images in the editor. [⌊Several comparisons side by side in one block.⌉⌊Several comparisons side by side in one block.⌉[ Several comparisons side by side in one block. [⌊Vertical orientation with labels.⌉⌊Vertical orientation with labels.⌉[ Vertical orientation with labels. ## Blocks This plugin provides 1 block. * Before After Compare A draggable before and after image comparison slider. Add more comparisons to show them side by side. ## Installation 1. Upload the plugin folder to the `/wp-content/plugins/` directory, or install it through the Plugins screen in WordPress. 2. Activate the plugin through the Plugins screen. 3. Add the Before After Compare block to any post or page and select your before and after image. ## FAQ ### Do I need a page builder? No. The before and after slider works in the standard WordPress block editor. ### How do I show several comparison sliders side by side? Select the block and use the plus button in the toolbar, or the Add comparison button in the block settings. Each comparison you add lines up next to the others and shares the same design and aspect ratio. On phones they stack so each stays readable. ### Can I make a single slider smaller or align it? Yes. With a single comparison, the Layout panel offers a width control, a left, centered or right alignment, and a fixed aspect ratio. ### Can the slider move on hover instead of dragging? Yes. Enable the Move on hover option in the block settings. Touch devices keep the drag behaviour. ### Is the before and after slider accessible? Yes. The handle is a real slider control with ARIA semantics, a visible focus state, and keyboard support using the arrow keys, Home and End. ### Does the plugin load any external resources? No. All assets are served from your own site and the plugin does not contact external services or track anything. ### Is there a live demo? Yes. You can try every option at https://demo2.amitry.de and find out more at https:// amitry.de/amitry-before-after-slider/ ### Can I use it with Elementor? Yes. The plugin adds a native Elementor widget called Before After Slider. Open the Elementor editor, search for “Before After”, drag the widget in, choose a before and after image, and adjust orientation, labels, preset and colors in the panel. ### How do I create a slider and show it with a shortcode? Open Before/After Sliders in the WordPress admin menu and add a new slider. Choose a before and after image, set the options, and publish. Each slider has its own shortcode, for example `[bacmpr_slider id="123"]`, which you can copy from the editor and paste into any post, page or widget. These managed sliders are separate from the block and the Elementor widget. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Before After Slider Image Comparison Block – Amitry” is open source software. The following people have contributed to this plugin. Contributors * [ amitry ](https://profiles.wordpress.org/amitry/) [Translate “Before After Slider Image Comparison Block – Amitry” into your language.](https://translate.wordpress.org/projects/wp-plugins/amitry-before-after-slider) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/amitry-before-after-slider/), check out the [SVN repository](https://plugins.svn.wordpress.org/amitry-before-after-slider/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/amitry-before-after-slider/) by [RSS](https://plugins.trac.wordpress.org/log/amitry-before-after-slider/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1.0 * Added a slider manager in the admin (Before/After Sliders) with a per-slider shortcode, for example [bacmpr_slider id=”123″]. * Added a native Elementor widget (Before After Slider). #### 1.0.0 * Initial release. ## Meta * Version **1.1.0** * Last updated **2 weeks ago** * Active installations **Fewer than 10** * WordPress version ** 6.5 or higher ** * Tested up to **7.0** * PHP version ** 7.4 or higher ** * Tags * [before after](https://wordpress.org/plugins/tags/before-after/)[before after slider](https://wordpress.org/plugins/tags/before-after-slider/) [comparison slider](https://wordpress.org/plugins/tags/comparison-slider/)[image comparison](https://wordpress.org/plugins/tags/image-comparison/) [image slider](https://wordpress.org/plugins/tags/image-slider/) * [Advanced View](https://wordpress.org/plugins/amitry-before-after-slider/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/amitry-before-after-slider/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/amitry-before-after-slider/reviews/) ## Contributors * [ amitry ](https://profiles.wordpress.org/amitry/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/amitry-before-after-slider/)