The before-after slider is a touch-friendly module that helps you show two versions of an image together. UABB Pro has come up with Before After Slider module that lets you compare two before and after images with Beaver Builder Front-end Drag and Drop Builder. This module also lets you preview how the slider looks on the website while you edit a slider.
Note:
You can enable/disable the icon for each tab appearance option depending on your requirement. Also, you have full control over tab style like tab width, tab focus color, text active, hover colors, and much more.
Insert & Customize Before and After Image Slider
First, go to your web page where you want to use this slider. Just search for the ‘Before After Slider’ in the editor. When you see it (it is enlisted under UABB Modules), drag and drop it into a section in the editor.
Once you drop the module, you will see the default setup of the slider on the left side. You can see the ‘Before’ and ‘After’ modules here. You can insert the before and after images from the media library. Also, you can set the label text for before and after images.
Once you insert an image, you can change its size from the options available in the dropdown. Generally, the larger the image, the more space it will take.
Styling options
Go to the ‘Styling’ tab.
Here, you can change the slider bar orientation to Vertical or Horizontal. Also, you can set the overall alignment of the module here. You can set the Comparison Handle color and slider overlay color too.
Label Options
You can see the labels on the images only by hovering over them. Under the label options, you can set the label text typography, color, and background color.
Advanced Options
Under Advanced options, you can see the Spacing, visibility, Animation, HTML, and Import/Export options. You can set the required options of your choice here.