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

File Size: 6.43 KB
Views Total: 2455
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">

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


4. Decide whether to roll back when mouse leaves.

  'rollback': true

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

  'duration' : 400

6. Set the initial width of the 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.