Skip to content

Simple JavaScript plugin for image comparison sliders


Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit



11 Commits

Repository files navigation


A simple JavaScript image comparison library

Demo Gif

This library is designed to be plug and play. Simply download and include the Reveal.css and Reveal.js file on your page and set some tags in the HTML and the rest is taken care of auto-magically.

Basic Usage

Each reveal item consists of 2 images in a container. The simplest example is as follows.

<div class="reveal">
    <img src="leftImage.jpg">
    <img src="rightImage.jpg">

All you need is the .reveal class on the container of the images. Feel free to have as many of these reveal containers as you want on your page.

The other two components you need are the stylesheet and the script.

Add this line to your <head>:

<link rel="stylesheet" href="Reveal.css">

Add this line to the bottom of your <body>:

<script src="Reveal.js"></script>

Once the page is loaded, the script will automatically find all of the .reveal containers and setup everything for you. If you are adding content to your page after it's already loaded, check out the Advanced Usage below!

Advanced usage

You can call Reveal.init() and pass in a DOM element to initialize that reveal element. Make sure it still has the class="reveal" in the HTML!


If you want to add custom behaviors when the reveal bar is updated, you can add an event to listen to Reveal.onupdate. There are two pieces of data passed to this event listener.

  • elem: A reference to the DOM node of the container for the current reveal.
  • percent: A value from 0-100 to represent where the slider is currently located. 0 is left, 100 is right.
Reveal.onupdate = function(data) {
    // Your code here

Browser Support

Works on all browsers both mobile and desktop! (Yes that includes Internet Explorer.)