Slider to quickly compare two images
$ npm install image-comparison --saveimport { ImageComparison } from 'image-comparison';require(['ImageComparison'], function (ImageComparison) {
// Usage
});<link rel="stylesheet" href="node_modules/image-comparison/src/ImageComparison.css"><script>
new ImageComparison({
container: containerSelector,
startPosition: 70,
data: [
{
image: images[0],
label: 'before'
},
{
image: images[1],
label: 'after'
}
],
});
</script>Options list:
| Name | Description |
|---|---|
| container | Dom element for initialization ImageComparison |
| startPosition | starting position in percentage |
| data | Array of objects, where each object: `{ image: dom element, label: 'before'}` |
Chrome, FF, Opera, Safari, IE10+
See example - ImageComparison