Compare Two Images With A Smooth Slider - js-slider.js
File Size: | 6.43 KB |
---|---|
Views Total: | 2469 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.