Before After Image Comparison Slider for Elementor Pro | Click/hover

Before After Image Comparison Slider for Elementor Pro adds an interactive two-image comparison to Elementor Page Builder. Visitors move the slider to reveal each image. Use it for portfolios, service presentations, renovation examples, styling work, or other visual demonstrations. You can place unlimited sliders on a page.

Choose how the comparison works

Set the slider to a horizontal or vertical orientation. Visitors can move it by clicking the image or hovering over it. The slider is responsive and touch friendly for mobile and other touch devices, and supports modern browsers and devices.

Set images, labels, and styling

Use image sizes supplied by your theme or set custom width and height values. Dynamic Tags are supported, and you can change the image size and default slider offset. Edit the before-and-after text, then select background and text colors for the labels.

Custom CSS lets you override the default styling. Global Custom CSS and Global Custom JS settings provide broader control across the website. While editing, use the live preview to review the slider. The Pro edition also includes the free plugin functions: responsive and touch-friendly behavior, custom image dimensions, live preview, Custom CSS, and unlimited sliders. Priority support and bug fixes are listed among the Pro capabilities.

Create and extend a slider

In Elementor's front-end editor, add the before-and-after images, choose an orientation, and set the interaction and display options. Review the live preview, then adjust labels, colors, dimensions, offset, and styling for the page.

Two separate add-ons extend how sliders are displayed: Gallery Slider AddOn presents them as a slideshow with image navigation, while Carousel Slider AddOn presents them in an image carousel.