Interactive Horizontal/Vertical Image Comparison Slider – Pixelcompare

Preview:

Description:

Pixelcompare is a vanilla JavaScript image comparison library that creates an interactive, horizontal or vertical handler bar to compare 2 images for differences.

Supports touch, drag, and mouse hover events.

How to use it:

1. Just load the Pixelcompare’s files in the document and we’re ready to go.

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

2. Wrap after/before images into a container element with the data-pixelcompare attribute and pixelcompare class.

<div id="example" class="pixelcompare" data-pixelcompare>
  <img src="before" width="100%"/>
  <img src="after" width="100%"/>
</div>

3. Set a height for the parent container and done.

#example { height: 450px; }

4. Set the comparison slider to ‘Vertical’.

<div id="example" class="pixelcompare" data-pixelcompare data-horizontal>
  <img src="before" width="100%"/>
  <img src="after" width="100%"/>
</div>

5. Compare 2 images with mouse hover.

<div id="example" class="pixelcompare" data-pixelcompare data-hover>
  <img src="before" width="100%"/>
  <img src="after" width="100%"/>
</div>

Changelog:

01/23/2021

• pixelcompare script update & demo