
slick image compare
Is a modern image comparison slider written in vanilla JavaScript and has no dependencies on other libraries. Best for comparing images, image retouching, color adjustments, renderings, etc...

Docs
Read the documentation >>
tl;dr
Module
install the package
pnpm add slick-image-compare
html code
<div id="my-div"></div>
use it in your code
import SlickImageCompare from 'slick-image-compare';
import 'slick-image-compare/style';
const options = {
beforeImage: 'before.jpg',
afterImage: 'after.jpg',
};
const sic = new SlickImageCompare('#my-div', options);
Classic
<link rel="stylesheet" href="https://unpkg.com/slick-image-compare/dist/slick-image-compare.css">
<script src="https://unpkg.com/slick-image-compare"></script>
<div id="my-div" style="max-width:640px">
<img src="before.jpg" alt="before image" />
<img src="after.jpg" alt="after image" />
</div>
<script>
const sic = new SlickImageCompare('#my-div');
</script>