What is a Before and After Image Slider

There are many times we need to showcase our work in before and after format. For instance, if you are a graphic designer and manipulate a photo, you may want to compare final result with original photo. For this purpose a before and after image is a basic need. But a before and after image slider is comparatively more appealing.

In this tutorial I show you how to implement before and after image sliders in our WordPress posts. There are some plugins available that let us create JavaScript before and after image slider and Twenty20 Image Before-After plugin authored by Zayed Baloch is the more popular out of them. Luckily this plugin is fully free and can be used in WordPress posts and widget as well.

This plugin adds a button in post editor from where it is easy to add a before and after image slider. Additionally, a ready-made shortcode is also given with which we can add it anywhere in WordPress where shortcode can be parsed.

Tutorial – How to use Twenty20 before and after image slider

  • Twenty20 is a free plugin. We can install it from WordPress repository
  • After installing the plugin get to the WordPress media library and upload two of two before and after image slider images
  • Note down the image IDs of uploaded images. You can find image ids as shown in the image given below. In regards to WordPress, every image has its own unique ID created automatically on image upload

 

Now in any post/page/widget or custom you can add the slider by adding the following shortcode

[twenty20 img1=”45” img2=”46” direction=”vertical” offset=”0.5" align=”right” width=”60%” before=”Before” after=”After” hover=”true”]

In the shortcode replace 45 and 46 with the image IDs of your before and after images. Additionally you can customize other parameters given in the shortcode.

In case you are using WP Bakery, Elementor or UX Builder, there are easy to customize Twenty20 blocks are available. However, new WordPress Block editor is still awaiting this plugin’s customizable block. (If you are using old classic editor, a button is available in editor to add slider step by step easily and no need to upload and add image IDs to shortcode separately).

Word

About Shams

Shams, a professional blogger, has expertise in WordPress and Web Hosting. He is used to playing around with WordPress plugins, themes, web hosting services and some other innovative stuff regarding web design. He sifts out good stuff for web designers and reviews it to help them choose what they really need.

Being an energetic tech enthusiast, he regularly pens down breaking news and tutorials related to technology particularly Smartphones and other gadgets. Sometimes writes tech tips too. It was the dawn of Internet age when he started dabbling in it and has since been delving into the realm of the internet. He occupies a permanent burrow in virtual world.

He can be reached at.- here