Image Comparison Slider with jQuery and CSS3

A simple Image comparison draggable slider plugin allows to quickly compare two images. It’s powered by jQuery & CSS3 which easy to use.

It is a great jQuery plugin for creating image comparison sliders that work well on mobile devices. Basically, the plugin shows the before and after the difference between the two images.

The draggable feature allows users to easily see the difference of an image by sliding the image using the mouse. It’s also a touch-enabled plugin that swipes the image on mobile.

It is easy to implement on any kind of website. You don’t need to work hard to build a slider. All you need to add the images in the div container then the rest of the things plugin can handle itself.

How to Use  jQuery Image Comparison Slider

To add the plugin into your project, first, you need to load the all jQuery/JavaScript library and imgSlider plugin’s CSS and JavaScript file into your HTML page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- imgSlider JS -->
<script src="dist/imgslider.min.js"></script>

<!-- imgSlider CSS -->
<link rel="stylesheet" href="dist/imgslider.min.css">

After loading all necessary assets, let’s create an HTML div element with two classes slider and responsive. Next, we will add two of child divs and place your images (left and right) in it.

<div class="slider responsive">
   <div class="left image">
      <img src="path/to/img-before.jpg"/>
   </div>
   <div class="right image">
      <img src="path/to/img-after.jpg"/>
   </div>
</div>

The Javascript

Finally, initialize the plugin in jQuery document ready function to active image slider.

$(document).ready(function(){

   $('.slider').slider();

});

Initialization options

You can customize the plugin with the following setting options.

initialPosition: .5
showInstruction: true
instructiontext: "Click and Drag"

For instance, you can override the default values during the initialization by passing in the options like this:

<script type="text/javascript">

  $('.slider').slider({ instructionText:"New instructions here" });

</script>

Note: The plugin works with jQuery so you need to add the jQuery dependencies. If you are already using jQuery into your project then you don’t need to add that.