The Before After Image Slider allows you to visualize the difference between two images.
Macro parameters
| Label | Parameter | Default | Description | Hosting Type |
|---|---|---|---|---|
| Method | method | Choose from 5 different methods to visualize the images. | Server, Cloud | |
| Left Image | leftImage | Search box for the left image. | Server, Cloud | |
| Right Image | rightImage | Search box for the right image. | Server, Cloud | |
| Width | width | 50% | Width of the container. | Server |
| Slide on mouse move | hover | Yes | If enabled slides will be moved with the mouse move. | Server, Cloud |
| Overlayed Slider | overlayedSlider | No | By default the slider is beneath the images. Settings this option the slider is on top of the images. | Server, Cloud |
| CSS Classes | cssClasses | Parameter to set additional css classes to enable further features or for advanced customization. | Server |
Methods
Overlay
| Before After Image Slider (Deprecated) | ||||||||
|---|---|---|---|---|---|---|---|---|
|
|
From Right
| Before After Image Slider | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Side by Side
| Before After Image Slider | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Fade In
| Before After Image Slider | ||||||||
|---|---|---|---|---|---|---|---|---|
|
From Left
| Before After Image Slider | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Other Configurations
Overlaid handle
| Before After Image Slider | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Rounded Slider
| Before After Image Slider | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Hidden handle (Mouse only)
| Before After Image Slider | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Subtle slider
| Before After Image Slider | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|