image-comparison

js Styles
Slider to quickly compare two images
Version 2.0.4 License MIT
Keywords
image comparisonimage sliderphoto comparisontwo imageimage javascript plugin
INSTALL
Type:
<script src=" https://cdn.jsdelivr.net/npm/image-comparison@2.0.4/src/ImageComparison.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/image-comparison@2.0.4/src/ImageComparison.min.css " rel="stylesheet">
No default CSS file set by the package author so the URL is guessed. You can always browse all package files to use another one.
ImageComparison

Slider to quickly compare two images
Install
$ npm install image-comparison
Connection
JavaScript
CommonJS
import { ImageComparison } from 'image-comparison';
AMD
require(['ImageComparison'], function (ImageComparison) {
// Usage
});
CSS
<link rel="stylesheet" href="node_modules/image-comparison/src/ImageComparison.css">
Usage
<script>
new ImageComparison({
container: containerSelector,
startPosition: 70,
data: [
{
image: images[0],
label: 'before'
},
{
image: images[1],
label: 'after'
}
],
});
</script>
Options
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'}` |
Browsers support
Chrome, FF, Opera, Safari, IE10+
Example
See example - ImageComparison