Interactive Image Comparison Slider Vanilla JavaScript Library | Pixelcompare

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

Supports touch, drag, and mouse events.

How to make use of it:

1. Just load the Pixelcompare’s files within the doc and we’re able to go.

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

2. Wrap after/earlier than photos right into a container component 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 complete.

#example { height: 450px; }

4. Set the comparability 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 photos with mouse hover.

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

Interactive Horizontal/Vertical Image Comparison Slider, Pixelcompare Plugin/Github

See Demo And Download