Scott Paterson

WPPlugin LLC

Nilambar Sharma

Manesh Timilsina

WP Concern

Before After Image lets visitors drag a handle to compare two images side-by-side.
Works in three ways — use whichever fits your site:
<ul>
<li>Shortcode — You can you shortcodes on any post or page. Use the built-in shortcode builder to generate shortcodes easily.</li>
<li>Elementor widget — drag and drop the widget onto any page with full style controls.</li>
<li>WooCommerce — attach a before/after comparison to any product directly from the product editor.</li>
</ul>
<a href="https://demos.wpplugin.org/before-after-image/" rel="nofollow ugc">View Demo</a>
Full usage instructions, shortcode options, and WooCommerce setup steps are available inside the plugin under the Before After Image menu.
<h3>Key Features</h3>
<ul>
<li>Works standalone via shortcode — Elementor and WooCommerce are both optional</li>
<li>WooCommerce product integration with per-product settings</li>
<li>Elementor widget with full style controls</li>
<li>Horizontal and vertical orientation</li>
<li>Handle movement by drag or mouse hover</li>
<li>Customisable before/after labels (on hover, always, or never)</li>
<li>Enable/disable overlay</li>
<li>Default handle offset position</li>
<li>Six handle styles</li>
<li>Handle types: Arrows or Text</li>
<li>Slider colour — white or black (line, handle, and arrows)</li>
<li>Image size option</li>
<li>Typography and colour options (Elementor)</li>
<li>Touch and pointer-event support</li>
</ul>
<h3>Before After Image Pro</h3>
Want more features? Check out Before After Image Pro:
<ul>
<li>Auto-Slide Animation — Grab attention with an automatically sweeping handle. Configure speed and pause-on-hover behavior.</li>
<li>3-Image Comparison — Show before, during, and after with two draggable handles.</li>
<li>Full-Screen View — Let visitors zoom in with a button to expand the slider to full screen.</li>
<li>Custom Colors — Fine-tune the line, circle, and arrows independently to match your brand.</li>
<li>Rounded Corners — Add subtle to fully rounded corners for a polished look.</li>
<li>Shortcode Manager — Save and reuse slider configurations with <code>[mbai_preset id="..."]</code> shortcodes.</li>
<li>Premium Support — Get priority support and automatic updates.</li>
</ul>
<a href="https://wpplugin.org/downloads/before-after-image-pro/" rel="nofollow ugc">Get Before After Image Pro</a>

Before After Image

Before After Image with a draggable handle. Works with Elementor, WooCommerce, and shortcode.

Sajib Talukder

WPxon

Before After Image Comparison Slider plugin help you to make an Image comparison slider before/after.
<h3>Features</h3>
<ul>
<li>Fully responsive. </li>
<li>Easy to use.</li>
<li>Easy Installation. </li>
<li>Translation ready</li>
</ul>

Before After Image Comparison Slider

A before after image comparison slider for WordPress.

Before After Image vs Before After Image Comparison Slider