Overlaid sliders allow you to make comparisons between two images, usually a before-after kind, with the two images superimposed on each other. A slider that can be manipulated, can be dragged by the user to show less of the before image and more of the after image, and vice versa.
It’s the perfect way for certain scenarios such as viewing the harsh effects of Mars’ atmosphere or how city landscapes change over a half of a century.
For designers, it is also a great way to reflect on the amount of change a technique or approach has on an original image. There are various JS libraries you can use for comparison purposes. Here are 5 of them.
Twentytwenty
Twentytwenty is visual tool to make it easy to note the differences between two images. This tool utilizing the jQuery and jquery.event.move to work. It’s very easy to use, just stack two images into a container, then call twentytwenty(); for the container.
<div id="container"> <img src="img-before.png"> <img src="img-after.png"> </div>
Then:
$("#container").twentytwenty();
Twentytwenty responsive and work for all device, and if you using Foundation framework this will work out of the box.
Juxtapose
Juxtapose helps you compare two pieces of media (photos or GIF) and make it easy for you to highlight the change between the images over time. This plugin is easy to use and works on all devices. Just provide two images then call the plugin with the available options.
On the options, you may set the slider start position, set it vertical or horizontal, add label and credit, animation and more.
Try a demo below:
imgSlider
imgSlider is a simple jQuery plugin to make image comparison slider. The use is simple and easy: after including its JS and CSS, wrap the images in div with the left class for the before image, and right class for the after image, then activate it by calling .slider();. The plugin’s options include setting the initial position of the slider, and adding/showing instructions on the slider.
<div class="slider responsive"> <div class="left image"> <img src="before.jpg"/> </div> <div class="right image"> <img src="after.jpg"/> </div> </div>
Call the plugin:
$('.slider').slider();
Cocoen
Cocoen enables touch with the use of the jQuery-Touch Event. It’s easy to apply due to an HTML structure similar to the Twentytwenty plugin. On the script stack, besides jQuery you need to include the jQuery Touch Event library, alongside this plugin.
<div class="cocoen"> <img src="img/before.jpg" alt=""> <img src="img/after.jpg" alt=""> </div> $(document).ready(function(){ $('.cocoen').cocoen(); });
Try a demo below:
Image Comparison Slider
CodyHouse made a demo of an image comparison slider with CSS3, jQuery and some scripts to handle the drag event and to add mobile support. You can follow the full explanation and instructions of using this plugin here and see the demo here.
Try a demo below:
Here are 3 more:
Cato – Other plugins need jQuery as dependency but Cato requires no dependency to work, making it a more lightweight library for image comparison sliders. The use is easy, just include Cato’s CSS and JS library and follow its HTML structure.
There are options available to apply on your slider, including adding tooltip, changing slider direction, even adding filter effect such as sepia and grayscale. However you should note that Cato currently only has support for WebKit.
Before After – This is lightweight, fully responsive, and works on any layout and size. You can see the live demos on Codepen.
HTML5 Video Comparison Slider – When another developers try to make comparison slider for images, then Dudley Storey apply the slider to video. To make work, he utilize the jQuery and just a few lines of code. See the demo on Codepen to see the action.
