Minimal Responsive Image Comparison Slider With Vanilla JavaScript – before-after

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