Getting Started

Load using JsDelivr CDN

The first step is add the css and javascript references to the Image-Comparer in your page, like the code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EduardoJM/Image-Comparer@1.0.3/dist/css/image-comparer.min.css" />
    <title>Document</title>
</head>
<body>

    
    <script src="https://cdn.jsdelivr.net/gh/EduardoJM/Image-Comparer@1.0.3/dist/js/image-comparer.min.js"></script>
</body>
</html>

Then, the next step is add the component markup in your html page. The component markup is like the code below.

<div class="image-compare">
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

And now, initialize the component via JavaScript, like the code below.

var el = document.querySelector('.image-compare');
var comp = new ImageCompare(el, options);

Setting options from data-*

In the component initialization is possible to set the component options, but if you need to initialize various elements and want to set the options individualy, is possible to set the options using the data-* html attribute, when * represents the option. One example of this is to set the element width with data-width, see in the code below.

<div class="image-compare" data-width="50%">
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

The supported data-* attributes is:

Example
.flex-icon-parent {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div
    class="image-compare auto"
    data-width="50%"
    data-height="150px"
    data-slider-class="circle flex-icon-parent red white-text"
    data-slider-content="<i class='material-icons'>people</i>"
>
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>