5 Free Image Comparison Slider Scripts

By . in Toolkit. Updated on .

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 is responsive and works for all devices, and if you use the Foundation framework, this will work out of the box.

twentytwenty

img-comparison-slider

img-comparison-slider pursues the following principles:

  • Mobile-friendliness,
  • Accessibility,
  • Responsiveness,
  • Compactness,
  • Adjustability, and
  • Compatibility with modern JS frameworks

It is also highly configurable and compatible with almost any web application or design system. The installation of the slider is as simple as adding HTML tags to a webpage:

<img-comparison-slider>
  <img slot="first" src="https://img-comparison-slider.sneas.io/demo/images/before.webp">
  <img slot="second" src="https://img-comparison-slider.sneas.io/demo/images/after.webp">
</img-comparison-slider>

Try a demo below:

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();
simple image 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’s a few 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 a tooltip, changing slider direction, and even adding filter effects 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.

before-after

HTML5 Video Comparison Slider – When another developers try to make comparison slider for images, then Dudley Storey apply the slider to video. To do work, he utilizes jQuery and just a few lines of code. See the demo on Codepen to see the action.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail