How To Display Before And After Images In WordPress With Slider

April 28th, 2017 | by Ravi Chahar || 4 Comments |

You may have noticed at many websites, people compare two images and show them together.

It’s basically used when people try to show the difference between or similarity between two images. Suppose you’re showing an image which is blurred and another with the high quality.

That’s where you need something to attach those photos.

Do you know how to display before and after images in WordPress? This is an interesting topic.

In this tutorial, I will not be even showing you the way to combine two images but a slider too.

Use An Interesting WordPress Plugin From Its Repository.

There is a plugin named “Before After Image Slider Lite“.

You just have to install and active this plugin to your WordPress website.

NOTE: Depending on your theme, you will get an advice to install another plugin to activate the shortcodes. If the plugin works perfectly then no need to install an additional plugin otherwise, you have to install.

You don’t need to do any setting of this plugin.

There will be an option in the WordPress post editor. It will look like a box having the splitting sign.

Just click on that box and a few option will appear to you.

You will notice the space to insert two images.

Choose the left and right images accordingly and insert in the post. It’s not different from adding an image from your Media library to your post.

You just have to pick both the images from the media library only.

There are a few options regarding the width of the images. You can choose it accordingly. But if you’re going to use the slider then leave it 100%.

There is a CSS class. By default, it’s “hover”. Keep it as it is.

Save the post and post it.

You will notice that both the images are attached taking 50% part of each.

The interesting part is that you will get a slider below those images.

You can slide to any side. If you slide to the right side, the portion of the left image will be showing more than 50% and will increase to 100%.

You have successfully added two images together and a slider with them.

Isn’t That Attractive How You Merge Two Images And Add A Slider

This is something I always wanted to know about.

Thankfully, this plugin saved me. It can be great if you write a post about changing the quality of the image using any tool.

Or you can merge an image with its sketch. Are you going to display before and after images in WordPress using this plugin or any tool? If you have any doubt, feel free to clear it.

You can also connect with us on Twitter, LinkedIn, and Facebook.