Before After Image Comparison Slider for Elementor Pro places an interactive comparison of two images in an Elementor page. Visitors move a control to reveal each image, which can help display changes in portfolios, service presentations, renovation examples, and design work.

The Pro edition includes the free add-on’s responsive, touch-friendly show, live preview, theme or custom image dimensions, Custom CSS, and unlimited sliders.

Comparison settings

Choose a horizontal or vertical orientation. Mouse visitors can move the control by clicking the image or moving the pointer over it. The slider is also described as touch friendly for mobile and other touch devices.

Dynamic Tags are supported. Choose image sizes from your theme or enter custom width and height values, then set the default slider offset. You can edit the before-and-after text to label each side of the comparison.

Labels, preview, and styling

Set the background and text colors for the before-and-after labels. While editing, use the live preview to see how the slider looks on the page. Custom CSS can override the default styling; Global Custom CSS and Global Custom JS provide options for broader styling and scripting.

Elementor setup and related add-ons

In Elementor’s front-end editor, find the widget under “WEB BUILDERS ELEMENT” as “Before After Image Comparison Slider.” Add two images, set their image sizes, then configure the other options.

Gallery Slider AddOn shows sliders as a slideshow with image navigation. Carousel Slider AddOn displays them with an image carousel. Both are separate add-ons.