Press "Enter" to skip to content

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.

image comparison slider online, image comparison slider html, free image comparison slider, jquery image comparison slider, responsive image comparison slider

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%"/>

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%"/>

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%"/>

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

See Demo And Download

Official Website(diamanthaxhimusa): Click Here

This superior jQuery/javascript plugin is developed by diamanthaxhimusa. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.