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

Category: Image , Javascript | September 7, 2018
Author: ArekPastuszka
Views Total: 1,324
Official Page: Go to website
Last Update: September 7, 2018
License: MIT

Preview:

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

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

You Might Be Interested In:

Leave a Reply