Before After Image Comparison Slider for Elementor Pro lets you compare two images in Elementor Page Builder with an interactive slider. Use comparisons for portfolios, service presentations, renovation examples, design work, and other visual demonstrations. Create unlimited sliders, including multiple comparisons on the same page.

How visitors move between images

Choose a horizontal or vertical orientation. Visitors can move the comparison by clicking the picture or moving the mouse over it. The responsive slider is also touch friendly for mobile and other touch devices.

What determines image size and position

Use image sizes provided by your theme or set custom width and height values. The plugin supports Dynamic Tags, image size changes, and an adjustable default slider offset. Customize the before-and-after text to label each side of the comparison.

How labels and styling change

Choose background and text colors for the before-and-after labels. Preview the slider while editing, then use Custom CSS to override its default styling. Global Custom CSS and Global Custom JS settings provide broader control.

The Pro edition includes the extension's free functions, including responsive behavior, touch support, custom image dimensions, live preview, Custom CSS, and unlimited sliders. The source also describes support for modern browsers and devices.

Other show options

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