Before and After Slider

How to configure Before and After Slider

To make a visual comparison, the before and after slider is the ideal tool. Because of this, there are numerous situations in which you can use this effect. A before-and-after slider can be used by a photographer to showcase their abilities. They may demonstrate, for instance, how skillfully they colored a black-and-white image.

Start by adding the files listed in the installation zip that was provided when you made the purchase.

Once you have added the code into the code editor head into the theme editor by clicking the customize button

When adding the section, please start typing eg before...

It will look like this and have you add a block

Please add in the before and then add another block for the image after

In the section settings, you are given the options to:

1. wrpa in the container- full-width edge to edge or in a container

2. ui styling

3. label options, before and after

4. show label on hover

5. hover on start - Please note that you must save the changes first in order to see them

6. vertical mode -Please note that you must save the changes first in order to see them

In the block settings, please add the iamge you want to display

in the block settings, please add the after image you want to display

Both of these images should be the same dimensions and preferably one colored, and one black and white.

They must the be same image but with different hue

The image should be around 1920 by 550 height to display full image quality.

If you need help, please review and refer to the YouTube page