Image compare

Create interactive image compare with Metro 4 component.

About

To create image-compare, add attribute data-role="imagecompare" to your container and put into container two images.

                    <div class="image-compare" data-role="imagecompare">
                        <img src="images/ic-1.jpg">
                        <img src="images/ic-2.jpg">
                    </div>
                

Set size

You can change size of image-compare with attributes data-width and data-height. By default, these attributes have next values: data-width="100%", data-height="auto". You can use integer, percent or aspect-ratio values.

Aspect-ratio value

To set component height, you can use special aspect-ratio values: 16/9, 21/9, 4/3.

Fixed size

To set fixed size, use integer values for attributes data-width and data-height.

                    <div class="image-compare" data-role="imagecompare" data-width="300" data-height="200">
                        <img src="images/ic-1.jpg">
                        <img src="images/ic-2.jpg">
                    </div>
                

Responsive container

If you need a response image-compare, set data-width="100%" and use special values for data-height attribute: 16/9, 21/9, 4/3, auto (for auto used 16/9 value).

                    <div class="image-compare" data-role="imagecompare" data-height="16/9">
                        <img src="images/ic-1.jpg">
                        <img src="images/ic-2.jpg">
                    </div>
                

Events

You can create callback for component events: data-on-resize, data-on-slider-move and data-on-image-compare-create.