imagecompare

jQuery Multi Image Compare Plugin

HowTo:

1. ADD TO HEAD

<link rel="stylesheet" type="text/css" href="https://articks.github.io/imagecompare/jquery.imagecompare.min.css" />
<script src="https://code.jquery.com/jquery-3.6.2.min.js"></script>
<script src="https://articks.github.io/imagecompare/jquery.imagecompare.min.js"></script>

2. ADD HTML

<ul class="jqueryImageCompare" data-ratio="5x3">
    <li data-image="/path/to/image1.jpg" data-title="Image title"></li>
    <li data-image="/path/to/image2.jpg" data-title="Image title"></li>
    ...
    <li data-image="/path/to/imagen.jpg" data-title="Image title"></li>
</ul>

data-ratio = block width x height for responsive layout (default=3x1)