The component represents a comparison handler.
It allows you to layer two images on top of each another and compare them via a draggable slider.
- @veams/core - Veams Core Framework.
- @veams/query or
jquery- Veams Query or jQuery. - @veams/component - Veams Component.
veams install component comparerveams -i c comparer| Parameter | Type | Value | Description |
|---|---|---|---|
| settings.comparerContextClass | String | default |
Context class of component. |
| settings.comparerClasses | String | Modifier classes for component. | |
| settings.jsOptions | Object | JavaScript options which gets stringified. |
The module gives you the possibility to override default options:
| Parameter | Type | Value | Description |
|---|---|---|---|
| handle | String | '[data-js-item="comparer-handle"] |
Define the handler element. |
| topContainer | String | '[data-js-item="comparer-top-container"] |
Define the element for top container. |
| topContent | String | '[data-js-item="comparer-top-content"] |
Define the content element in top container. |
| draggClass | String | 'is-dragging |
Define the dragging class. |
| dragMode | Boolean | true |
Enable or disable drag mode. |
| topContentRight | Boolean | false |
Reverse the drag mode direction. |
| disabled | Object | {'mobile-s': false, 'mobile-m': false, 'mobile-l': false, 'tablet-s': false, 'tablet-l': false, 'desktop-s': false, 'desktop-m': false, 'desktop-l': false} |
Define on which viewport the module is enabled. |
There are multiple global variables which you can change:
| Parameter | Default Value | Description |
|---|---|---|
| $comparer-color-light | #fff !default |
Handle color. |