Skip to content
Simple JavaScript plugin for image comparison sliders
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A simple JavaScript image comparison library

Live Demo

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 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 your 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.)

You can’t perform that action at this time.