Kalea
Slider Block
The Slider Block provides a simple before/after block that lets the user switch between two images. It is normally used to display different property configurations. The caption information for the images are displayed above, indicating what the user will see if they drag the slider bar away from that title. The slider bar can be moved in three ways; firstly, clicking anywhere on the image will make the slider bar tween smoothly to that position, secondly clicking on the appropriate header (eg ‘Light Scheme’) will move the bar to the opposite side, and finally the bar can be dragged directly by the user.
Example One
This Slider Block uses Layout One, which is a wider-aspect block. It has a starting position of 25%, meaning that the slider bar should default towards the left-hand side of the image.
Example Two
This Slider Block uses Layout Two, which is a taller-aspect block. It has a starting position of 75%, meaning that the slider bar should default towards the right-hand side of the image.
Example Three
This Slider Block has multiple slides, allowing the user to slide between them. It has a starting position of 50%, meaning that the slider bar should be centered on the image.