Experience the powerful AI writing right inside WordPress
Show stunning before-and-after transformations with image sliders.
Improve user engagement by showing estimated reading time.
Written by Mahmuda Akter Isha
Showcase Designs Using Before After Slider.
A before-after image slider is one of the easiest ways to show visual change on a website. Instead of placing two images side by side and expecting visitors to compare them manually, a before-after slider lets users drag a handle and clearly see the difference between two versions of the same image.
This is especially useful for websites that need to show transformations, comparisons, improvements, edits, repairs, redesigns, or visual results.
For example, a before-after image comparison slider can help you showcase:
In this guide, you will learn how to create a before after image slider in WordPress using HTML, CSS, JavaScript, and a no-code WordPress plugin method.
You will also learn how to make the slider responsive, mobile-friendly, SEO-friendly, and easy to add inside WordPress posts, pages, Elementor, or Gutenberg.
A before-after image slider is an interactive image comparison tool that displays two images in the same frame. One image usually represents the “before” version, and the other represents the “after” version.
Users can drag a slider handle left or right to reveal more or less of each image.
This type of slider is also known as:
The main goal is simple: help users compare two images quickly and visually.
Instead of explaining the difference with long text, you can let users see the change for themselves.
A before-after slider is not just a design element. It can improve user experience, build trust, and help visitors understand your work faster.
Here are the main benefits.
People trust what they can see. If you are showing a transformation, a before-after slider gives clear visual proof of the result.
For example, a renovation company can show how a room looked before and after remodeling. A photo editor can show the original image and the edited version. A web designer can show an old website layout and a redesigned version.
This makes your result easier to understand.
Interactive content keeps visitors on the page longer. When users drag the slider handle, they are actively engaging with your content instead of just scrolling past it.
This can make your page feel more useful and memorable.
Side-by-side images are useful, but they can be hard to compare when the details are small. A before-after slider places both images in the same space, making differences easier to notice.
This is helpful for small details like:
If your business depends on showing results, your portfolio should be visual and convincing. A before-after slider can make your portfolio more powerful by showing the exact improvement.
This works well for agencies, photographers, designers, clinics, repair services, contractors, and product-based businesses.
You can add a before-after slider to blog posts, landing pages, service pages, case studies, and portfolio pages.
For example, you can use it in:
There are two common ways to create a before-after image slider.
You can build it manually using HTML, CSS, and JavaScript, or you can use a WordPress before-after image slider plugin.
Both methods are useful, but the best option depends on your skill level and website needs.
A basic before-after layout can be designed with HTML and CSS, but a truly draggable and mobile-friendly slider usually needs a small JavaScript snippet.
For most WordPress users, the plugin method is easier because you do not need to manually edit theme files, write custom code, or troubleshoot browser issues.
However, if you want full control over the structure and styling, the HTML, CSS, and JavaScript method is a good option.
Before adding a slider to WordPress, prepare your images properly. This step is important because poorly prepared images can make the slider look broken or unprofessional.
Follow these best practices.
The before and after images should have the same width and height.
For example:
If the images have different dimensions, they may not align correctly. The slider may look uneven, stretched, or broken.
Try to use images taken from the same angle, distance, and position. This makes the comparison clearer.
For example, if you are showing a home renovation, use the same room angle for both before and after images.
Large images can slow down your website. Before uploading images to WordPress, compress them using an image optimization tool.
You can use formats like:
WebP is often a good option for modern websites because it can reduce file size while keeping good quality.
Instead of uploading images with names like:
IMG_1234.jpg
Use descriptive names like:
kitchen-renovation-before.jpgkitchen-renovation-after.jpg
kitchen-renovation-before.jpg
kitchen-renovation-after.jpg
This helps with image organization and SEO.
Alt text helps search engines and screen readers understand your images.
Example alt text:
Before image of kitchen renovation projectAfter image of modern kitchen renovation project
Before image of kitchen renovation project
After image of modern kitchen renovation project
Do not stuff keywords unnaturally. Make the alt text clear and descriptive.
This method is useful if you want to manually create a responsive before-after slider using custom code.
You can use this on a custom HTML website or inside WordPress using a Custom HTML block, child theme, or custom code plugin.
First, create the basic HTML structure for the before-after image slider.
<div class="before-after-slider" style="--position: 50%;"> <div class="image-container"> <img class="image-before" src="before-image.jpg" alt="Before image comparison example" > <img class="image-after" src="after-image.jpg" alt="After image comparison example" > </div> <input type="range" min="0" max="100" value="50" aria-label="Before and after image comparison slider" class="slider" > <div class="slider-line"></div> <div class="slider-button" aria-hidden="true"> <span></span> <span></span> </div> <div class="label label-before">Before</div> <div class="label label-after">After</div> </div>
Replace before-image.jpg and after-image.jpg with your actual image URLs.
before-image.jpg
after-image.jpg
In WordPress, you can upload your images to the Media Library and copy the image URLs from there.
Now add the CSS to style the image comparison slider.
.before-after-slider { position: relative; width: 100%; max-width: 900px; margin: 40px auto; overflow: hidden; border-radius: 16px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); --position: 50%; } .image-container { position: relative; width: 100%; aspect-ratio: 16 / 9; } .image-container img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; } .image-before { z-index: 1; } .image-after { z-index: 2; clip-path: inset(0 0 0 var(--position)); } .slider { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; } .slider-line { position: absolute; top: 0; bottom: 0; left: var(--position); z-index: 3; width: 3px; background: #ffffff; transform: translateX(-50%); pointer-events: none; } .slider-button { position: absolute; top: 50%; left: var(--position); z-index: 4; width: 46px; height: 46px; border: 3px solid #ffffff; border-radius: 50%; background: rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 5px; pointer-events: none; } .slider-button span { width: 8px; height: 8px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; } .slider-button span:first-child { transform: rotate(-45deg); } .slider-button span:last-child { transform: rotate(135deg); } .label { position: absolute; top: 16px; z-index: 4; padding: 7px 14px; border-radius: 30px; background: rgba(0, 0, 0, 0.55); color: #ffffff; font-size: 14px; font-weight: 600; pointer-events: none; } .label-before { left: 16px; } .label-after { right: 16px; } @media (max-width: 600px) { .before-after-slider { border-radius: 10px; } .slider-button { width: 38px; height: 38px; } .label { font-size: 12px; padding: 6px 10px; } }
This CSS makes the slider responsive, clean, and mobile-friendly.
The clip-path property controls how much of the after image is visible. When the slider moves, the visible area changes.
clip-path
Now add a small JavaScript snippet to make the slider interactive.
const sliders = document.querySelectorAll(".before-after-slider"); sliders.forEach((sliderWrapper) => { const slider = sliderWrapper.querySelector(".slider"); slider.addEventListener("input", (event) => { sliderWrapper.style.setProperty("--position", `${event.target.value}%`); }); });
This JavaScript updates the CSS variable --position when the user drags the range input.
--position
The slider will work with both mouse and touch because the range input is supported by most modern browsers.
After adding the HTML, CSS, and JavaScript, test the slider on different screen sizes.
Check these things:
If everything works correctly, your before-after image slider is ready.
The slider uses two images stacked on top of each other.
The before image stays visible in the background. The after image sits above it. The CSS clip-path controls how much of the after image is shown.
When users drag the range input, JavaScript updates the slider position. This changes the visible area of the after image and moves the slider line and handle.
This creates a smooth before-after image comparison effect.
If you want to add the custom code inside WordPress, you can use the Custom HTML block.
Go to your WordPress dashboard.
Then go to:
Media → Add New
Upload your before and after images.
After uploading, open each image and copy its file URL.
You will need those URLs in the HTML code.
Open the post or page where you want to show the before-after slider.
Then click the plus icon and add a Custom HTML block.
Paste the HTML code inside the block.
Replace the image URLs with your WordPress image URLs.
Example:
<img class="image-before" src="https://example.com/wp-content/uploads/kitchen-before.jpg" alt="Before kitchen renovation" > <img class="image-after" src="https://example.com/wp-content/uploads/kitchen-after.jpg" alt="After kitchen renovation" >
You can add the CSS in:
Appearance → Customize → Additional CSS
Paste the CSS code there and publish the changes.
You can also add the CSS through your child theme or a custom code plugin.
To add JavaScript, you can use a custom code plugin or enqueue it properly in your child theme.
For a simple setup, many users prefer a custom code snippets plugin.
Add the JavaScript code and make sure it loads on the page where the slider appears.
The manual method is useful if you are comfortable working with code.
However, it may not be the best option for every WordPress user because:
That is why many WordPress users prefer a plugin-based method.
If you do not want to write custom HTML, CSS, or JavaScript, the easiest method is to use a WordPress before-after image slider plugin.
A plugin lets you create image comparison sliders directly from the WordPress dashboard.
One useful option is WP Before After Image Slider.
It is built for WordPress users who want to create responsive before-after sliders without manually writing code.
With WP Before After Image Slider, you can create sliders for:
The plugin helps you upload before and after images, customize labels, choose slider direction, generate a shortcode, and place the slider anywhere on your WordPress website.
WP Before After Image Slider is useful when you want a no-code solution for image comparison.
Instead of building everything manually, you can create and manage sliders from your WordPress dashboard.
Here are some useful features.
You do not need to write HTML, CSS, or JavaScript manually.
You can create a before-after slider from the plugin settings and place it using a shortcode, Elementor widget, or Gutenberg block.
The plugin generates a shortcode for each slider.
You can copy the shortcode and paste it into any WordPress post, page, widget area, or template that supports shortcodes.
This is helpful if you want to reuse the same slider in different places.
If you use Elementor, you can add the before-after slider directly to your Elementor layout.
This makes it easier to design landing pages, portfolio sections, and service pages with visual comparison blocks.
The plugin can also work with the WordPress block editor. You can add your slider inside Gutenberg content without editing code.
You can use a horizontal slider for left-to-right comparisons or a vertical slider for top-to-bottom comparisons.
Horizontal sliders are common for photo editing, renovation, and product comparisons.
Vertical sliders can be useful for design previews, maps, screenshots, or layout comparisons.
A good before-after slider should work on desktop, tablet, and mobile.
WP Before After Image Slider helps you create responsive sliders that fit different screen sizes.
Image sliders often use large images. Lazy loading can help improve page performance by loading images only when needed.
This is useful for pages with multiple comparison sliders.
Alt text is important for accessibility and image SEO.
The plugin allows you to use alt text for your before and after images, helping search engines and users understand the image content better.
Follow these steps to create a before-after slider in WordPress without coding.
From your WordPress dashboard, go to:
Plugins → Add New
Search for:
WP Before After Image Slider
Click Install Now, then click Activate.
After activating the plugin, open the plugin settings from your WordPress dashboard.
Create a new before-after slider.
Upload your before image and after image.
Make sure both images have the same dimensions for the best result.
Add labels such as:
Labels help users understand which image they are viewing.
Keep labels short and clear.
Choose whether you want a horizontal or vertical comparison.
Use a horizontal slider when users need to compare left and right movement.
Use a vertical slider when top-to-bottom comparison makes more sense.
For most WordPress websites, the horizontal layout works best.
Depending on your settings, you can customize the slider appearance.
You may adjust:
Try to keep the design simple. The goal is to help users compare images easily, not distract them with too many effects.
After creating the slider, copy the generated shortcode.
The shortcode may look similar to this:
[wp_before_after_slider id="123"]
Your actual shortcode may be different depending on the slider ID.
Open the WordPress post or page where you want to display the slider.
Paste the shortcode into the content area.
Then preview the page.
If the slider looks good, publish or update the page.
If you use Elementor, adding a before-after slider can be even easier.
Elementor is popular for building landing pages, portfolio pages, service pages, and custom layouts. A before-after image slider works well inside these designs.
Follow these steps:
If you are using WP Before After Image Slider, you can use the plugin’s Elementor support or shortcode method to place the slider inside Elementor.
You can use it in:
For example, a home renovation business can add a before-after slider under a heading like:
See the Transformation
A photo editing agency can use:
Original vs Retouched Result
A web design agency can use:
Old Website vs New Website
These sections make the page more visual and persuasive.
If you use the default WordPress block editor, you can add a before-after slider using a shortcode block.
This method is simple and works well for blog posts, tutorials, comparison articles, and portfolio pages.
You can also add a short explanation above or below the slider to help users understand what they are comparing.
“Drag the slider to compare the original photo with the edited version.”
This small instruction can improve user engagement.
A before-after slider can be used in many industries. Here are some practical examples.
Real estate websites can use before-after sliders to show property improvements.
Examples:
This helps buyers, renters, and clients quickly understand the value of the transformation.
Interior designers can use image comparison sliders to show how a space changed after design work.
This is useful for portfolio pages and case studies.
Photographers and photo editors can use sliders to show editing quality.
A slider makes small editing details easier to notice.
Web design agencies can use before-after sliders to compare old and new website designs.
This can help potential clients understand your design improvement clearly.
Clinics and beauty professionals can use before-after sliders to show visible results.
Make sure to follow local advertising and privacy rules when using client images.
Cleaning companies can use before-after sliders to show the quality of their service.
These comparisons are highly visual and easy for visitors to understand.
E-commerce brands can use before-after sliders to show product improvements.
This can be useful for product landing pages.
Tutorial websites can use before-after sliders to show learning results.
This makes tutorials more engaging and easier to follow.
A before-after slider can also support SEO if you use it properly. Since the slider uses images, you should optimize both the visual content and the surrounding text.
Use headings that match search intent.
These headings help search engines understand the topic of your page.
Do not place a slider on the page without context.
Add a short explanation before or after the slider.
“Drag the handle to compare the original website design with the redesigned version.”
This helps both users and search engines understand what the slider is showing.
Use descriptive file names.
Good examples:
bathroom-renovation-before.jpgbathroom-renovation-after.jpg
bathroom-renovation-before.jpg
bathroom-renovation-after.jpg
Bad examples:
image1.jpgfinal-new-copy.jpg
image1.jpg
final-new-copy.jpg
Alt text should describe the image.
Before image of bathroom renovation projectAfter image of modern bathroom renovation project
Before image of bathroom renovation project
After image of modern bathroom renovation project
Avoid keyword stuffing like:
before after image slider WordPress image comparison slider plugin before after slider
That looks unnatural and does not help users.
Before-after sliders usually use two images, so file size matters.
Compress your images before uploading them to WordPress. This can help improve loading speed.
Lazy loading is helpful when you have multiple sliders on one page.
For example, if you have a portfolio page with ten before-after sliders, lazy loading can prevent all images from loading at once.
Link to related content on your website.
For example, you can internally link to:
Internal links help users discover more content and help search engines understand your site structure.
FAQ sections can help your article rank for long-tail search queries.
For this topic, you can answer questions like:
Sometimes a before-after slider may not work properly because of image, CSS, JavaScript, theme, or plugin issues.
Here are the most common problems and solutions.
This usually happens when the two images have different dimensions.
Fix:
Use images with the same width and height.
For example, if the before image is 1200 × 800 px, the after image should also be 1200 × 800 px.
Also, make sure both images are taken from the same angle or layout position.
This can happen if the JavaScript is missing, broken, or blocked.
Check that your JavaScript code is loaded on the page.
Also check your browser console for errors.
If you are using WordPress, make sure your theme or optimization plugin is not delaying or blocking the script.
Mobile issues can happen because of poor responsive CSS or a non-touch-friendly slider.
Use a range input or touch-supported JavaScript. Also test the slider on real mobile devices.
Make sure the slider container has a responsive width, such as:
width: 100%; max-width: 900px;
Avoid fixed widths like:
width: 900px;
Fixed widths can break mobile layouts.
This usually happens when the image container and image dimensions do not match.
Use:
object-fit: cover;
This helps images fill the slider area without distortion.
You can also adjust the aspect ratio depending on your image format.
aspect-ratio: 4 / 3;
or
aspect-ratio: 16 / 9;
Before-after sliders use at least two images, so large files can slow down the page.
If your shortcode appears as plain text, WordPress is not processing it correctly.
Make sure you are adding the shortcode inside a shortcode-supported area.
In Gutenberg, use the Shortcode block.
In Elementor, use the Shortcode widget.
Also check that the plugin is active.
This may happen if the widget is not loaded, the shortcode is incorrect, or there is a plugin conflict.
Theme updates may change CSS or JavaScript behavior.
Use a child theme for custom code. If you are using a plugin, update the plugin and clear cache.
If the issue continues, check for CSS conflicts from the theme.
Labels may not be visible because of poor contrast or positioning.
Use a background behind the label text.
background: rgba(0, 0, 0, 0.55); color: #ffffff;
Also make sure labels have a higher z-index.
z-index
This can happen when the slider has a fixed width or is placed inside a narrow container.
Use responsive CSS:
Also check the parent container width in your theme or page builder.
A good before-after image slider should be easy to use and visually clear.
Follow these design tips.
Do not overload the slider with too many effects, animations, or design elements.
The images should be the main focus.
Labels like “Before” and “After” are simple and effective.
You can also use labels like:
The slider handle should be visible on both light and dark images.
Use contrast, border, or a semi-transparent background.
Do not place the slider too close to other elements. Give it enough margin so users can focus on the comparison.
Many users will view your page on mobile. Make sure the slider is easy to drag on small screens.
Too many sliders can slow down the page and overwhelm visitors.
For portfolio pages, choose your best examples instead of adding every project.
You can add a before-after slider in many places on your website.
Use sliders inside tutorial posts, comparison articles, or case studies.
“Here is the image before and after applying the editing technique.”
Use sliders to show the result of your service.
A cleaning service page can show a sofa before and after cleaning.
Use sliders to showcase your best work.
A design agency can compare old and new website designs.
Use sliders as proof sections to increase trust.
“See how our redesign improved the page layout.”
Use sliders to compare product versions or demonstrate product results.
A software company can show an old interface vs a new interface.
Use sliders to support your story with visual evidence.
A renovation case study can show the property before and after the project.
If you are comfortable with code, the HTML, CSS, and JavaScript method gives you full control. You can customize every part of the slider and adapt it to your website design.
But if you are using WordPress and want a faster, easier, and more manageable solution, a plugin is usually the better choice.
Here is a simple recommendation:
Use the HTML/CSS/JavaScript method if:
Use the WordPress plugin method if:
For most WordPress users, WP Before After Image Slider is the easier option because it lets you create and manage sliders without manually editing HTML, CSS, or JavaScript.
A before-after image slider is one of the most effective ways to show visual comparison on a WordPress website. Whether you are displaying photo edits, renovation results, product changes, website redesigns, or portfolio work, an interactive slider can make the difference easier to understand.
You can create a before-after slider manually with HTML, CSS, and JavaScript if you want full control. This method is useful for developers and custom websites.
However, if you want a faster and easier WordPress workflow, using a plugin is usually the better choice.
With WP Before After Image Slider, you can create responsive before-after sliders without coding, add them to WordPress posts and pages, use shortcodes, place sliders inside Elementor or Gutenberg, and showcase visual comparisons in a clean and engaging way.
If your website depends on showing transformation, comparison, or visual results, adding a before-after image slider can make your content more interactive, more useful, and more convincing.
A before-after image slider is an interactive image comparison element that lets users compare two images by dragging a slider handle. It is commonly used to show transformations, edits, renovations, redesigns, and visual improvements.
You can create a before-after image slider in WordPress manually using HTML, CSS, and JavaScript. You can also use a WordPress before-after image slider plugin to create the slider without coding.
You can create the basic layout with HTML and CSS, but a draggable and interactive slider usually needs JavaScript. Without JavaScript, the slider may not respond properly to user movement.
The easiest way is to use a WordPress plugin like WP Before After Image Slider. It allows you to upload before and after images, customize the slider, generate a shortcode, and place the slider inside posts, pages, Elementor, or Gutenberg.
A well-built before-after slider should be mobile responsive. If you are coding it manually, use responsive CSS. If you are using a plugin, choose one that supports responsive design.
You can add a before-after slider in Elementor using an Elementor widget or a shortcode widget. If your plugin provides a shortcode, copy the shortcode and paste it into the Elementor Shortcode widget.
In Gutenberg, add a Shortcode block and paste your before-after slider shortcode. Then preview the page to make sure the slider appears correctly.
Common reasons include missing JavaScript, plugin conflicts, theme CSS conflicts, incorrect shortcode placement, image size mismatch, or caching issues. Check your script, plugin settings, image dimensions, and cache.
This page was last edited on 2 July 2026, at 5:56 pm
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
How many people work in your company?Less than 1010-5050-250250+
By proceeding, you agree to our Privacy Policy