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 |
|---|
| method | overlay |
|---|
| width | 100% |
|---|
| leftImage | image_galleries_uuid_stefaniecobra_kernerblend_right_1__jpg-2212f9686ea12c49-558885d9-4f60480c-aef495d0-222c5eb3acabb01e35c5696c |
|---|
| rightImage | image_galleries_uuid_stefaniecobra_kernerblend_left_21__jpg-925f43c317443cb9-9f8e26b0-491d43cb-82adbeac-a4f2e12d62963a87767a68aa |
|---|
|
From Right
| Before After Image Slider (Deprecated) |
|---|
| method | from-right |
|---|
| width | 80%100% |
|---|
| leftImage | 1376302 | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
Side by Side
| Before After Image Slider (Deprecated) |
|---|
| method | side-by-side |
|---|
| width | 80%100% |
|---|
| leftImage | 1376302 | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
Fade In
| Before After Image Slider (Deprecated) |
|---|
| method | fade-in |
|---|
| width | 80%100% |
|---|
| leftImage | 1376302 | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
From Left
| Before After Image Slider (Deprecated) |
|---|
| method | from-left |
|---|
| width | 80%100% |
|---|
| leftImage | 1376302 | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
Overlaid handle
| Before After Image Slider (Deprecated) |
|---|
| method | overlay |
|---|
| width | 80%100% |
|---|
| overlayedSlider | true |
|---|
| leftImage | 1376302 | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
Rounded Slider
| Before After Image Slider (Deprecated) |
|---|
| method | overlay |
|---|
| cssClasses | rounded-handle |
|---|
| width | 80%100% |
|---|
| leftImage | 1376302 | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
Hidden handle (Mouse only)
| Before After Image Slider (Deprecated) |
|---|
| method | overlay |
|---|
| cssClasses | hidden-slider |
|---|
| width | 80%100% |
|---|
| overlayedSlider | true |
|---|
| leftImage | 1376302 |
|---|
| leftImage | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
Subtle slider
| Before After Image Slider (Deprecated) |
|---|
| method | overlay |
|---|
| cssClasses | subtle |
|---|
| width | 80%100% |
|---|
| leftImage | 1376302 | image_galleries_uuid_cobra_blend_right_1__jpg-6ea12c49-85d9-480c-95d0-b01e35c5696c |
|---|
| rightImage | image_galleries_uuid_cobra_blend_left_1__jpg-17443cb9-26b0-43cb-beac-3a87767a68aa | rightImage | 1376303 |
|---|
|
