jQuery ImageCompare Plugin

Add to head

You can download lates version from here: https://github.com/articks/imagecompare.

<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>

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>

And you'll get something like this (ratio 5x2):

Or this (ratio 4x1):