Image compare
Create interactive image compare with Metro UI 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
.