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 URLAdd Custom Labels on imagesHorizontal and Vertical Orientation for imagesFeature to move the slider on hover or clickFully customizable sliderUse 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 .