This demo basically need to highlight the differences between the two images? This design is a visual difference tool, makes it easy to spot them!

How it works to moves across the image ?

Image Over Slider works by stacking two images on top of each other. As the example slider moves across the image, it makes use of the CSS clip property to trim the image on the left or right vies-versa. This allows the image on the right to show through the container.

In the design we are using custom movement events jquery.event.move Jquery library in order to support 1:1 slider movement on mobile devices.

How To Setting Up Image Over Slider Effect Moves Across The Image:

Integration of this code is simple and easy to get started, just wrap two images inside of one container. The first image will be on the left and the second one will be on the side of right. Check below example for container:

<div id="container1">
<img src="sample-before.png">
<img src="sample-after.png">
</div>
Then call twentytwenty() on this container once the images have loaded:

$(window).load(function() {
$("#container1").twentytwenty();
});

Demo      Download Source Code