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