Exindium Before/After Compare

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. Elementor also displays a visual preview of the slider directly inside the editor.

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.

Plugin Website & Live Demo

Learn more about Exindium Before/After Compare, view the live demo, and find additional plugin information on the official Exindium website.

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 “EXBAC Dynamic Labels” domain.

With Polylang, the labels are available through the Strings translations screen.

Technical details