Interactive comparing widget
Download:
Include it on your page:
<script src="path/to/comparator.js"></script>
<link rel="stylesheet" href="path/to/comparator.css">
Add div with class comparator
with two img
elements inside:
<div class="comparator">
<img src="path/to/left/image.png">
<img src="path/to/right/image.png">
<div>
You can add some options via data
attributes:
data-return
— whether to return divider to center when the mouse cursor leaves the area. Possible values:true
,false
.
-- Drop me a line if you use Comparator.