jQuery & jQuery UI Based Image Comparison Slider

Makes use of jQuery UI to create a slider handle that enables you to compare two overlapping images with a little bit jQuery magic.

See also:

• jQuery Plugin To Compare Two Images Via A Nice Interface - ClassyCompare
• jQuery Before and After Image Comparison Plugin - Image Reveal
• jQuery Plugin For Image Comparison with Mouse Interaction - DiffWidget.js

How to use it:

1. Load the necessary jQuery library and jQuery UI's CSS & Javascript in the document.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

2. Add the 'Before' image into the image comparison slider as follows.

<div class="con">
  <img src="before.jpg" class="imageOne">
  <div class="coverImage"></div>
  <div class="handle"></div>
</div>

3. The CSS to style the image comparison slider and add the 'After' the images into it using background property.

.con {
  width: 562px;
  height: 300px;
  border: 2px solid ;
  position: relative;
  margin: auto;
}
.con img {
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.coverImage {
  position: absolute;
  background: url("after.jpg");
  background-size: auto 100%;
  width: 50%;
  height: 100%;
}
.handle {
  width: 0px;
  height: 100%;
  border-left: 12px solid #fff;
  position: absolute;
  left: 50%;
}
.handle:after {
  content: "DRAG";
  display: block;
  width: 60px;
  height: 60px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #999;
  line-height: 60px;
  font-weight: 300;
  text-align: center;
  background: #fff;
  position: absolute;
  left: -36px; top: 0; bottom: 0;
  margin: auto;
}

4. The JQuery script to enable the image comparison slider on document ready.

$(".handle").draggable({ 
  axis: "x",
  containment: "parent",
  drag: function() {
    var position = $(this).position();
    var positionExtra = position.left + 6;
    $(".coverImage").width(positionExtra + "px");
  }
});

---

This awesome jQuery plugin is developed by Ruddy. For more Advanced Usages, please check the demo page or visit the official website.