The Before-After slider element allows you to display the before and after versions of an image by simply sliding over them.
GENERAL TAB SETTINGS:-
Under Basic tab we have the following options:
- Before Image- Upload the Before image.
- Alt Text- Add an alternate text to the before image.
- Before Label- Add label to the before image, by default it shows Before.
- After Image- Upload the After image.
- Alt Text- Add an alternate text to the after image.
- After Label- Add label to the after image, by default it shows After.
DESIGN TAB SETTINGS:-
In Orientation tab we have the given options:
- Width- Set the complete image width of the element.
- Alignment- Set the of the element on all the devices Desktop, Tablet or Mobile.
- Orientation- Set the orientation of the element either Horizontal or Vertical.
- Move on Hover- Enable/Disable whether the handler will move on hover or not.
- Display Overlay- Choose whether you want to show the labels On Hover, Always or Never.
In Comparison Handler tab we have these options:
- Handle Initial Offset- Set the initial offset value of the handle over the images. Default is 70% that is 70% of before image & remaining for the after one.
- Handle Color- Choose the color of the handle from the given color picker.
For details on Advanced tab read the article.