WordPress plugin

Before After Image Comparison Slider for Elementor Pro

Before After Image Comparison Slider for Elementor Pro lets you place an interactive comparison of two images in an Elementor layout. Visitors move the slider to reveal each image, making it useful for portfolios, service presentations, renovation examples, styling work, and other visual comparisons.

Before After Image Comparison Slider for Elementor Pro

Before After Image Comparison Slider for Elementor Pro lets you place an interactive comparison of two images in an Elementor layout. Visitors move the slider to reveal each image, making it useful for portfolios, service presentations, renovation examples, styling work, and other visual comparisons.

Create unlimited sliders, including multiple sliders on the same page. The Pro edition includes the plugin’s free functions, such as responsive behavior, touch support, live preview, custom image dimensions, and Custom CSS.

Choose the comparison direction and movement

Set each slider to a horizontal or vertical orientation. Visitors can move the comparison by clicking the image or moving the mouse over it. The slider is also described as touch friendly for mobile and other touch devices.

Set image size and label text

Use image dimensions from your theme or enter custom width and height values. Dynamic Tags are supported, and you can adjust the image size and default slider offset. Customize the before and after text to fit the images and the page.

Set the background and text colors for the before and after labels. The responsive slider is listed as compatible with modern browsers and devices.

Preview and style the slider

Preview the comparison while editing to see how it will appear on the page. Use Custom CSS to override the default styling for a slider, or apply broader changes with Global Custom CSS and Global Custom JS options. The Pro feature list also includes priority support and bug fixing.

Use separate show add-ons

Gallery Slider AddOn shows sliders as a slideshow with image navigation. Carousel Slider AddOn displays them in an image carousel. Each is a separate add-on.

Build a comparison in Elementor

Add the slider to your Elementor workflow, choose the before and after images, then choose an orientation and set the interaction and display options. Use the live preview as you edit, and adjust labels, colors, dimensions, and styling to fit the page.

Compare

WordPress Catalog Product Feed for WooCommerce Pro Product Filter for WooCommerce by WBW Pro Product Gallery Slider Pro Product Input Fields for WooCommerce Pro Product Labels For WooCommerce Pro Product Open Pricing for WooCommerce Premium Product Size Charts Plugin for WooCommerce Pro Product Slider for WooCommerce Premium Product Sort and Display for WooCommerce Premium Product Table for WooCommerce Premium