Put two images in one comparison

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

Choose the direction and movement

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

Set image size and starting position

Use image sizes provided by your theme or set custom width and height values. Dynamic Tags are supported. You can change the image size and set a default slider offset to choose where the comparison begins.

Label and style each side

Customize the before-and-after text, then set the background and text colors for both labels. Custom CSS lets you override the default styling. Global Custom CSS and Global Custom JS settings provide broader control over the slider's appearance and behavior.

While editing, use the live preview to see how the slider will look on the page. Pro includes the free capabilities described for the add-on, along with priority support and bug fixes.

Optional show add-ons

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