The Before-After slider element allows you to display the before and after versions of an image by simply sliding over them.
Similar to other elements this element also has three different tabs General, Styling & Handle Styling all under the main General tab.
Under General 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.
In Styling 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 Handle Styling 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.
