Interactive Horizontal/Vertical Image Comparison Slider – Pixelcompare

Category: Image , Javascript | October 1, 2019
Author:diamanthaxhimusa
Views Total:1,035 views
Official Page:Go to website
Last Update:October 1, 2019
License:MIT

Preview:

Interactive Horizontal/Vertical Image Comparison Slider – Pixelcompare

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>

You Might Be Interested In:


Leave a Reply