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
