Description
Exindium Before/After Compare is a lightweight way to showcase visual transformations on your WordPress site. Whether you are highlighting a home renovation, dental work, fitness progress, photo retouching, design changes, or any other before-and-after comparison, the plugin lets you create interactive sliders quickly without writing code.
Sliders can be placed anywhere using a simple shortcode and work with Gutenberg, Elementor, Divi, Beaver Builder, WPBakery, and other themes or page builders that support WordPress shortcodes.
Live Visual Editor
Create and customize sliders from a dedicated admin interface with a sticky live preview. Changes to images, aspect ratio, labels, handle styles, alignment, and other display settings are reflected instantly while editing.
Lightweight by Design
The frontend is built with lightweight Vanilla JavaScript and has no jQuery dependency. Frontend assets are loaded only when a slider shortcode is rendered.
Features
- Live Visual Editor: Preview slider changes instantly while editing, including a single-image preview before the comparison is complete.
- Zero jQuery Dependency: Built with lightweight Vanilla JavaScript.
- Horizontal & Vertical Modes: Create left/right or top/bottom image comparisons.
- Handle Themes & Styles: Choose Light or Dark divider themes and Classic (Circle) or Modern (Pill) handle styles.
- Modern Label Styles: Choose Solid, Semi-Transparent, or Glass label backgrounds.
- Custom Initial Position: Set the slider handle starting position from 0% to 100%.
- Responsive Layout: Sliders adapt to different screen sizes and support touch interaction.
- Keyboard Navigation: Slider handles can be controlled using the keyboard arrow keys.
- Accessibility Features: Includes ARIA slider attributes, orientation information, keyboard controls, and accessible labels.
- Custom Dashboard: Manage, edit, duplicate, and delete sliders from a dedicated admin screen, with automatic pagination for larger slider libraries.
- Customizable UI: Adjust aspect ratio, border radius, label alignment, label visibility, and font size.
- Shortcode Driven: Place sliders anywhere WordPress shortcodes are supported.
- Multiple Sliders Per Page: Use multiple independent comparison sliders on the same page.
- WPML & Polylang Support: Translate custom Before and After labels on multilingual sites.
Multilingual Support
Exindium Before/After Compare integrates with both WPML and Polylang.
Slider configuration such as images, orientation, layout, handle style, and appearance is shared across languages. Only the custom “Before” and “After” labels are registered for language-specific translation.
With WPML, these labels are available through String Translation under the “MBAC Dynamic Labels” domain.
With Polylang, the labels are available through the Strings translations screen.
Screenshots
Installation
- Upload the
exindium-before-after-comparefolder to the/wp-content/plugins/directory, or install the plugin through the WordPress plugins screen. - Activate the plugin through the “Plugins” screen in WordPress.
- Navigate to “B/A Sliders” in the WordPress admin sidebar.
- Click “+ Create New Slider”.
- Select both Before and After images and customize the slider.
- Save the slider.
- Copy the generated shortcode, for example
[mbac_before_after id="123"], and paste it into any post, page, widget, or page builder shortcode element.
FAQ
-
Do I need to know how to code to use this?
-
No. The plugin includes a visual editor where you can upload images and configure the slider using standard controls. Once saved, copy the generated shortcode and place it wherever you want the slider to appear.
-
Will this plugin slow down my website?
-
The plugin is designed to remain lightweight. The frontend uses Vanilla JavaScript with no jQuery dependency, and its frontend assets are only enqueued when a slider shortcode is rendered.
-
Does it work with my page builder?
-
Yes. Exindium Before/After Compare uses a standard WordPress shortcode, so it can be used with Gutenberg and most page builders or themes that provide a shortcode block, widget, or element.
Example:
[mbac_before_after id=”123″]
-
Can I use multiple sliders on the same page?
-
Yes. Multiple slider shortcodes can be placed on the same page and each slider operates independently.
-
Is the slider mobile-friendly?
-
Yes. Sliders are responsive and support touch dragging on phones and tablets. Horizontal and vertical slider modes are both supported.
-
Yes. The slider handle can receive keyboard focus and can be moved using the arrow keys.
-
Can I translate the “Before” and “After” labels?
-
Yes. You can define custom labels directly in the slider editor.
On multilingual websites, the plugin integrates with WPML String Translation and Polylang Strings so those labels can be translated per language.
-
What happens to my sliders if I deactivate or delete the plugin?
-
Deactivating the plugin does not delete your slider data.
By default, your sliders and settings are also preserved if the plugin is deleted. This allows your existing sliders to become available again if the plugin is reinstalled later.
You can change this behavior from the Settings modal in the B/A Sliders dashboard.
Choose “Keep Slider Data” to preserve your sliders and settings after deletion, or choose “Delete Data on Uninstall” to permanently remove them when the plugin is deleted.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Exindium Before/After Compare” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Exindium Before/After Compare” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.