Image Swipe - BeforeAfter
This component enables users to display two swipe-able images. See usage tab for more details.
- Overview
- Specification
- Examples in-situ
- Usage
Image
Specification
This provides guidance on the build, layout and content options for this component.
Image Swipe - BeforeAfter
| Component item | Requirement & purpose | Optional or mandatory | CMS options |
|---|---|---|---|
| Before image uploader | Allows user to set before image. | Mandatory | Image uploader. |
| Before image style | To choose image style from drop-down | Optional | Drop-down |
| Before image alt text | To provide alternate text for image | Mandatory | Text field |
| After image uploader | Allows user to set after image. | Mandatory | Image uploader. |
| After image style | To choose image style from drop-down | Optional | Drop-down |
| After image alt text | To provide alternate text for image | Mandatory | Text field |
| Caption text | Allows user to format text where additional styles may be required. | Optional | WYSIWYG. |
| Slider Container Width | Field to set maximum width of the container in pixel | Optional | Text field |
| Image Orientation | Horizontal / Vertical | Mandatory | Drop-down |
| Slider start position | To add starting position of the slider 1 to 100 | Optional | Number field |
| Slider Colour | To choose marker colour | Optional | Colour Field |
| Margin Bottom | To choose component margin | Optional | Large / Medium / Small / None |