Before and After Image Slider JS: Responsive HTML, CSS & JavaScript Guide

Before and after image sliders are one of the most effective ways to visually showcase changes, transformations, and comparisons on modern websites. From real estate renovations and fitness progress to product upgrades and UI redesigns, this interactive element instantly improves user engagement and storytelling.

A before and after image slider JS allows users to compare two images by dragging a handle across the screen. It creates a smooth, interactive experience using a combination of HTML, CSS, and JavaScript, making it a popular choice for developers and designers.

In this guide, you will learn how to build a responsive before and after image slider using vanilla JavaScript, along with modern best practices, mobile support, WordPress integration methods, and SEO optimization techniques. Whether you are a beginner or an experienced developer, this tutorial will help you implement a lightweight and high-performance image comparison slider for your website.

What is a Before and After Image Slider JS?

A before and after image slider JS is an interactive web component that allows users to compare two images by dragging a slider handle horizontally or vertically. It is widely used in modern websites for showcasing transformations, comparisons, and visual differences.

You can build it using:

• HTML for structure
• CSS for layout and image positioning
• JavaScript for drag interaction (mouse + touch support)

It is commonly used in real estate, fitness, beauty, photography, and product comparison websites.

What is a Before and After Image Slider?

A before and after image slider is a visual comparison tool that overlays two images in a single container. One image represents the “before” state and the other represents the “after” state.

As the user drags the slider:

• More of the “after” image is revealed
• Less of the “before” image is shown

This creates an engaging visual storytelling experience that improves user interaction and conversion rates.

Common use cases:

• Photo editing comparisons
• Real estate renovations
• Fitness transformations
• Product improvements
• UI/UX redesign showcases
• Medical or cosmetic results

Why Use JavaScript for a Before and After Image Slider?

Using JavaScript provides full control over behavior and interactivity.

Key benefits:

• Smooth dragging experience
• Works with mouse, touch, and stylus
• Fully responsive behavior
• Lightweight implementation (no library required)
• Easy customization for developers
• Better performance than heavy plugins

Modern implementations use the Pointer Events API, which simplifies cross-device compatibility.

How a Before and After Image Slider JS Works

The slider works by layering two images:

• The base image (before) stays fully visible
• The overlay image (after) is clipped dynamically
• A draggable handle controls visibility

Core concept:

The width (or clip-path) of the top image changes based on user interaction.

Modern best practice is using:

• clip-path instead of deprecated clip
• pointer events instead of mouse-only events

Step-by-Step: Build Before and After Image Slider (HTML + CSS + JS)

In this section, we will build a fully functional before and after image slider from scratch using HTML, CSS, and JavaScript. The goal is to create a smooth, responsive, and touch-friendly image comparison slider that works on all devices. You will start with a simple HTML structure for layering images, style them using CSS for proper alignment and visual layout, and then add JavaScript to enable interactive dragging functionality.

By the end of these steps, you will have a lightweight and fully customizable slider that can be easily integrated into any website or WordPress project.

Step 1: HTML Structure

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="before.jpg" class="before-image" alt="Before Image">
    <img src="after.jpg" class="after-image" alt="After Image">
    <div class="slider-handle"></div>
  </div>
</div>

Step 2: CSS Styling

.slider-container {
  width: 100%;
  max-width: 750px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  position: relative;
  width: 100%;
}

.before-image,
.after-image {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

/* Initial reveal state */
.after-image {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.2s ease;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #ffffff;
  cursor: ew-resize;
  z-index: 10;
}

Step 3: JavaScript Functionality

const container = document.querySelector(".slider-container");
const afterImage = document.querySelector(".after-image");
const handle = document.querySelector(".slider-handle");

let isDragging = false;

handle.addEventListener("pointerdown", () => {
  isDragging = true;
});

window.addEventListener("pointerup", () => {
  isDragging = false;
});

window.addEventListener("pointermove", (e) => {
  if (!isDragging) return;

  const rect = container.getBoundingClientRect();
  let x = e.clientX - rect.left;

  if (x < 0) x = 0;
  if (x > rect.width) x = rect.width;

  const percent = (x / rect.width) * 100;

  afterImage.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
  handle.style.left = `${percent}%`;
});

Make It Fully Responsive (Mobile Optimization)

To ensure smooth behavior on all devices:

Best practices:

• Use percentage-based widths
• Avoid fixed pixel positioning
• Use pointer events (not mouse-only events)
• Test on multiple screen sizes
• Ensure images scale properly

Why pointer events matter:

They unify:

• Mouse input
• Touch input
• Stylus input

This eliminates the need for separate event handling logic.

Before and After Image Slider in WordPress

If you are not a developer, you can still implement this feature easily in WordPress.

Method 1: Using a Plugin

• Install a before/after image slider plugin
• Upload your images
• Configure slider settings
• Insert using shortcode or block
• Publish your page

Method 2: Custom Code (Advanced Users)

• Add HTML block in Gutenberg
• Paste CSS in theme/customizer
• Add JS in footer or custom JS plugin

For users of CodeCanel, this functionality can be integrated directly into WordPress websites with optimized performance, customization control, and lightweight implementation.

Best Before and After Image Slider Use Cases

This UI component is widely used across industries:

Popular applications:

• Real estate property renovations
• Beauty and skincare transformations
• Fitness progress tracking
• Product upgrades and comparisons
• Photography editing portfolios
• Website redesign showcases
• Medical before/after results

SEO & Performance Best Practices

To improve ranking and user experience:

Image optimization:

• Use WebP format
• Compress images before upload
• Ensure same dimensions for both images

Performance optimization:

• Lazy load images
• Avoid heavy libraries
• Use vanilla JavaScript when possible

Accessibility:

• Add meaningful alt text
• Ensure keyboard accessibility
• Maintain contrast for slider handle

SEO structure:

• Use proper H1–H3 hierarchy
• Add keyword-rich headings
• Use internal linking
• Optimize image filenames

Common Issues & Fixes

1. Slider not dragging

• Check JavaScript file loading
• Ensure correct selectors
• Verify pointer event support

2. Images not aligned

• Use identical image dimensions
• Apply object-fit: cover properly

3. Mobile not working

• Replace mouse events with pointer events
• Test on real devices

4. Performance issues

• Compress images
• Reduce DOM complexity
• Avoid unnecessary transitions

Custom JavaScript vs Plugin vs Library

Choosing between custom JavaScript, plugins, and third-party libraries depends on your project requirements, skill level, and performance goals. Custom JavaScript gives you full control and lightweight implementation, plugins offer quick setup without coding, and libraries provide pre-built features that speed up development but may add extra dependencies.

Understanding these options helps you choose the most efficient approach for building a before and after image slider based on flexibility, performance, and ease of use.

Approach	Best For	Advantages	Limitations
Vanilla JS	Developers	Lightweight, full control	Requires coding
WordPress Plugin	Beginners	Easy setup, fast deployment	Limited customization
JS Library	Rapid development	Prebuilt features	Extra dependency

Conclusion

A before and after image slider JS is a simple yet powerful way to make visual comparisons more interactive and engaging on your website. By combining HTML for structure, CSS for layout, and JavaScript for drag-based interaction, you can create a smooth and responsive slider that works across desktop, mobile, and touch devices.

When built with modern best practices—such as using clip-path, pointer events, optimized images, and responsive design—you not only improve performance but also enhance user experience and SEO value. This makes the slider ideal for portfolios, real estate listings, product showcases, fitness transformations, and any content where visual comparison matters.

If you are using WordPress, you can also implement this feature easily using plugins or custom code integration, allowing even non-developers to achieve the same professional result.

Overall, a well-optimized before and after image slider is more than just a design element—it is a conversion-friendly UI component that helps users instantly understand value, change, and impact.

Frequently Asked Questions (FAQs)

This page was last edited on 26 June 2026, at 10:12 am