Image Comparer
The Image Comparer element is used to compare two images. It displays the images on top of each other and allows you to reveal the bottom image using the built-in slider.
Basic Usage
Attributes and Properties
Position
| Description | Sets the initial position of the dividing line as a percentage value (0-100). |
| Attribute | Position |
| Type | number |
| Default | 50 |
vertical
| Description | If true, the images will be compared vertically instead of horizontally. |
| Attribute | vertical |
| Type | boolean |
| Default | false |
disabled
| Description | If true, interaction with the component is disabled. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
Events
| Name | Description |
|---|---|
positionChange | Called when the position of the dividing line is changed, returns the current percentage value. |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
before | It refers to part of the first picture. |
after | Refer to part of the second picture. |
divider | Refers to the dividing line between images. |
handle | Refers to the slide control on the dividing line. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-img-compare-clip-path | Defines the crop shape of the image. |
--wje-img-compare-divider-background | The background colour of the dividing line. |
---wje-img-compare-divider-area | The size of the dividing line area. |
--wje-img-compare-divider-size | The size of the dividing line. |
--wje-img-compare-divider-left | Defines the location of the dividing line. |
Slots
| Name | Description |
|---|---|
before | Location for the first ("before") image. |
after | Location for the second ("after") image. |