<image-comparison>

A web component to create an image comparison element. Based off of this Codepen from Mads Stoumann.

Check out the Demo

Usage

<scripttype="module" src="image-comparison.js"></script><linkrel="stylesheet" href="image-comparison.css"><image-comparisonclass="imgcompare"><imgclass="before" src="https://picsum.photos/960/540?random=1" alt="A random image from Unsplash" /><imgclass="after" src="https://picsum.photos/960/540?random=2" alt="Another random image from Unsplash" /></image-comparison>

Change aspect ratio

<image-comparisonaspect-ratio="4/3">
…
</image-comparison>