Interactive Horizontal/Vertical Image Comparison Slider – Pixelcompare

Category: Image , Javascript | January 23, 2021
Author:diamanthaxhimusa
Views Total:2,267 views
Official Page:Go to website
Last Update:January 23, 2021
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>

Changelog:

01/23/2021

  • pixelcompare script update & demo

You Might Be Interested In:


Leave a Reply