Compare Two Images With A Smooth Slider - js-slider.js

js-slider.js is a jQuery based image comparison slider plugin which allows mouse hover & move to compare/view before and after images. The smooth slide effect is based on CSS3 animations.

How to use it:

1. Include the image comparison slider plugin's files on the webpage. Note that you first need to load the latest version of the jQuery library.

<link rel="stylesheet" href="css/js-slider.min.css">
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/js-slider.js"></script>

2. Add before and after images to the slider following the markup structure like this:

<div class="js-slider-container">
  <img src="before.jpg" class="js-slider-first">
  <div class="js-slider-last-container">
    <img src="after.jpg" class="js-slider-last">
  </div>
</div>

3. Activate the image comparison slider by calling the function on the top container.

$(".js-slider-container").slider();

4. Decide whether to roll back when mouse leaves.

$(".js-slider-container").slider({
  'rollback': true
});

5. Set the duration of the animation when rolling back.

$(".js-slider-container").slider({
  'duration' : 400
});

6. Set the initial width of the slider.

$(".js-slider-container").slider({
  'width' : '50%'
});

---

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