Before After Image Comparison Slider for Elementor Pro

Before After Image Comparison Slider for Elementor Pro puts two images in one interactive comparison. Visitors move the slider to reveal each picture, so visitors can compare both versions in the same slider. Create unlimited sliders, including several on the same page, for portfolios, service presentations, renovations, styling work, and other visual demonstrations.

How visitors explore the comparison

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

Image and label settings

Use image sizes provided by your theme or set custom width and height values. Dynamic Tags are supported, and you can change the image size and set the default slider offset to pick the comparison's starting position.

Customize the before-and-after text, then set the background and text colors for both labels. These settings let you identify each side and coordinate its appearance with the page.

Preview and style in Elementor

In the Elementor front-end editor, add the Before After Image Comparison Slider widget, upload two images, and set their sizes and other options. Preview the slider while editing, then adjust its display settings and styling. Custom CSS can override the default styles; Global Custom CSS and Global Custom JS provide website-wide styling and scripting options.

The Pro edition includes the free extension functions, including responsive behavior, touch support, custom image dimensions, live preview, Custom CSS, and unlimited sliders.

Separate display add-ons

Gallery Slider AddOn can present sliders as a slideshow with image navigation. Carousel Slider AddOn can present them in an image carousel. These are separate add-ons for changing how sliders are displayed.