View Before And After Images With Mouse And Touch Events – RevealJS

RevealJS is a dead simple, fully responsive, touch-enabled before/after image comparison slider component implemented in pure JavaScript and CSS.

How to use it:

1. Link to the stylesheet Reveal.css and JavaScript Reveal.js.

<link rel="stylesheet" href="./dist/Reveal.css">
<script src="./dist/Reveal.js"></script>

2. Insert before & after images into a DIV container with the CSS class of reveal. That’s it.

<div class="reveal">
  <img src="before.jpg" alt="before">
  <img src="after.jpg" alt="after">
</div>

3. Output the current comparison percent using the update event.

Reveal.onupdate = function(data) {
  // data.percent
};

Changelog:

10/15/2019

• JS updated