Submit your widget

TwentyTwenty----slider moves across the image

Created 6 years ago   Views 30440   downloads 5354    Author zurb
TwentyTwenty----slider moves across the image
View DemoDownload 956.2 KB
Share |

This demo need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them!

How it works

TwentyTwenty works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container.

We're using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices.

Setting up

It's easy to get started, just wrap two images inside of a container. The first image will be on the left and the second one will be on the right. Here's an example container:

<div id="container1">
  <img src="sample-before.png">
  <img src="sample-after.png">

Then call twentytwenty() on this container once the images have loaded:

$(window).load(function() {

Read more: