Author: | ArekPastuszka |
---|---|
Views Total: | 3,862 views |
Official Page: | Go to website |
Last Update: | September 7, 2018 |
License: | MIT |
Preview:

Description:
This is a vanilla JavaScript plugin to generate a responsive, mobile-friendly before/after slider to compare the difference between two images.
How to use it:
Import the stylesheet ‘before-after.min.css’ and JavaScript ‘before-after.min.js’ into the html file.
<link rel="stylesheet" href="dist/css/before-after.min.css"> <script src="dist/js/before-after.min.js"></script>
Insert before and after images into a container element.
<div id="example"> <img src="img/before.jpg" alt="Before" /> <img src="img/after.jpg" alt="After" /> </div>
Initialize the before-after plugin and done.
document.addEventListener('DOMContentLoaded', function () { var beforeAfterExample = new BeforeAfter(document.querySelector('#example')); });
Changelog:
09/07/2018
- added mobile support