Minimalist jQuery Plugin For Image Comparison Slider - diffViewer

diffViewer is an extremely lightweight jQuery plugin for creating an image comparison slider to show the differences between two images.

How to use it:

1. Load jQuery library and the jQuery diffViewer plugin at the end of the document.

<script src="jquery.min.js"></script>
<script src="jquery.diffviewer.min.js"></script>

2. Add before / after images into an Html list as follow.

<ul class="diff_list">
  <li>
    <div class="before"><img src="a.png"></div>
    <div class="after"><img src="b.png"></div>
    <div class="separator"><p>&nbsp;</p></div>
  </li>
</ul>

3. The required CSS styles for the image comparison slider.

ul,
li { list-style-type: none; }

.diff_list {
  cursor: col-resize;
  margin-top: 50px;
  margin-left: 50px;
  position: relative;
}

.diff_list li {
  position: relative;
  width: 640px;
  height: 320px;
}

.separator {
  width: 1px;
  height: 100%;
  background: #000;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}

.separator p {
  position: absolute;
  left : 50%;
  top : 50%;
  background: #fff;
  border-radius: 25px;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
}

4. Initialize the plugin.

$('.diff_list').find('li').diffViewer();

---

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