Before After Slider Widget

This is creative widget that allows displaying a before and after version of the image with smooth slider. It gives total control on all parts of the widget. Here is a demo. Below is the walkthrough video –

Key Features –

• Image sources can be – Media/Custom URL
• Add Custom Labels on images
• Horizontal and Vertical Orientation for images
• Feature to move the slider on hover or click
• Fully customizable slider
• Use multiple sliders on the single page

Adding Image and label

Image can be selected from a media library or can be set with external URL. Along with images, you can add a label that will display on an image.

Label can be styled from Style (tab) > Before/After Label

Orientation (Horizontal/Vertical)

Orientation will set a direction for the slider. Slider can be moved vertically or horizontally over a image. Orientation tab also has options to set overall alignment for the images.

By default a slider needs to be clicked and dragged along the edges of the images. But with Move on Hover option slider can be moved with mouse hover.

Comparison Handle

This tab contains all options to customize the slider handle .