VisualCompare – Before & After Slider
VisualCompare – Before & After Slider helps you show visual changes clearly: renovations, design revisions, retouching, medical or beauty results, product updates, restoration work, and any other before-and-after image comparison. Instead of placing two separate images side by side, you can add an i
VisualCompare – Before & After Slider helps you show visual changes clearly: renovations, design revisions, retouching, medical or beauty results, product updates, restoration work, and any other before-and-after image comparison.
Instead of placing two separate images side by side, you can add an interactive comparison slider that works with mouse, touch, keyboard, responsive images, and a no-JavaScript fallback. The same comparison can be created once, reused across pages, inserted with the WordPress block editor, added in Elementor, or embedded with a shortcode.
Why use VisualCompare?
- Create polished before-and-after sliders without writing custom code.
- Reuse saved comparisons across posts, pages, templates, and shortcodes.
- Keep comparisons usable for visitors who navigate with a keyboard or assistive technology.
- Configure new comparison defaults once so editors start from consistent settings.
- Show both images when JavaScript is unavailable instead of hiding important content.
Features
- Add before-and-after image comparisons with a native WordPress block.
- Build sliders in Elementor with live preview controls.
- Save reusable comparisons in the Visual Comparisons admin area.
- Embed saved comparisons with [visual_compare id="123"] .
- Embed inline comparisons with [visual_compare before="123" after="456"] .
- Choose horizontal or vertical slider orientation.
- Set the starting divider position for each comparison.
- Enable drag, click, touch, and keyboard interaction.
- Customize labels, divider color, divider width, handle size, corner radius, aspect ratio, image fit, and object position.
- Use responsive WordPress image markup from the Media Library.
