How To Display Before And After Images In WordPress With Slider

display before and after images in wordpress

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.

show before and after images

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.

how to display before and after 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.

by Ravi Chahar

A WordPress Professional and the LinkedIn Influencer. A coder by passion and a blogger by choice. WordPress theme development is his forte. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, theme development, design issues and what not.

4 comments

  1. Hi Ravi,

    I was always wondering how people compare 2 images like that. I’ve never heard of the “Before After Image Slider Lite.” There’s so many plugins that allow you to accomplish pretty much anything on WordPress.

    I’m still not sure why some people would still choose to start with a free platform.

    Thanks for sharing this information with us. I know that it answered a lot of people’s questions on how to show the differences or similarities between two images.

    have a great day 🙂

    Susan

    1. Hey Susan,

      WordPress is a vast platform which is quite hard for many. But once you start exploring it, you love it.

      This plugin can help many WordPress users to compare the images. It’s light and effective.
      Thanks for stopping by.
      ~Ravi

  2. Hello Ravi,

    Thanks for sharing. This a great way to showcase images in WordPress. It adds awesome looks to a basic image and makes it stand out. Have a great day ahead.

    ~Rod

Leave a Reply

Your email address will not be published. Required fields are marked *