Touch-friendly Image Comparison Slider With JavaScript

Preview:

Description:

A simple, responsive, mobile-friendly JavaScript image comparison plugin to compare before/after images with an image comparison slider that reacts to mouse drag and touch swipe.

How to use it:

Insert the image-comparison-slider.css and image-comparison-slider.js into the html document.

<link href="image-comparison-slider.css" rel="stylesheet">
<script src="image-comparison-slider.js"></script>

Create the html for the image comparison container and insert your own images as follows:

<div class="image-spliter">
  <div class="mover"></div>
  <img class="img-left" src="https://picsum.photos/600/450/?random">
  <img class="img-right" src="https://picsum.photos/g/600/400">
</div>