Are you looking for the best before and after image slider for your website? Worry no more! Cause we have the right solution for you. Today, we are going to show you how you can make one easily using Elementor.

A before and after image slider creates a slideshow by placing two similar images side-by-side. With a slider bar, you can drag it back and forth to see both comparing images. After all, it is an interesting way to showcase newly arrived products, the growth of your company, or special meanings. Not only it makes your visitors attracted to it, but also it shows the effects of your product or service. Indeed, it is a pretty good piece of a tool!

Generally, people use photo editor tools to make this type of effect. But using a simple Image Compare widget, you can easily achieve this feat. Note that, the company Element Pack has developed this widget. This widget is a fully functional image slider that helps you show 2 different versions of the same image. Furthermore, you can use it in any way you like.

No more chitchat. Let’s get into it!

Insert & Customize Before and After Image Slider

Inserting Widget

First, go to your web page where you want to use this slider. As we are doing this using elementor, make sure to install Elementor and Element Pack Lite plugins into your dashboard. However, we will not talk about installing procedures in this blog.

Though it is not worth mentioning, still beginners might find it hard. Just search for the Image Compare widget in the widget menu. When you see it (it has ElementPack logo on it), drag and drop it into a section in the editor.

Customizing the Layout of the Image Slider

Once you drop it, you will see the default setup of the slider at the start. However, this is the Layout section in the Content tab. You can choose any type of image for the image slider to show it here.

Let’s change the pictures. For starters, let’s select normal ones.

Once you insert an image, you can change their size from Image Size option. Generally, the larger the image, the more space it will take. For an image with a 1000-pixel height but only 500-pixel width, it will increase the slider length by a 1000 pixel.

Moreover, you can change the ‘After’ & ‘Before’ tags from here. Let’s talk about this part later and move on to the next section.

Interface Settings

Go to Content Tab> Additional

The Additional option is also known as interface settings. From here, we can change the slider bar orientation to either Vertical or Horizontal. Also, you can change the ‘before image‘ visibility. The Overlay switcher turns on/off overlay on the whole before and after image slider.

Once again, there are some things to talk about in this section. Notice that, you can add a circle in the middle of the slider bar. Also, you can add a blur effect to the circle.

One more interesting thing here is, you have the option to smooth the hover-drag of the slide bar. Turn on the switcher Smoothing? to smooth the hover-drag. However, you can adjust the sensitivity of the image slider bar with the scroll button below.