Adding a before and after image slider to your WordPress website is a great way to showcase transformations or comparisons. Whether you’re demonstrating product results, design makeovers, or photo edits, a slider allows your audience to interact with images and get a clear visual comparison. While plugins make this task simple, some users prefer a code-based approach to keep their website lightweight and free from excess plugin dependencies.

In this article, we will guide you through the steps to create a before and after image slider in WordPress using code. By the end, you’ll have a functional slider without needing to rely on external plugins.

Why Create a Before and After Image Slider Using Code?

There are a few key reasons why you might prefer to create your own before and after slider with code:

1. Increased Flexibility: By writing custom code, you can control every aspect of the slider’s appearance and behavior.
2. Improved Performance: Avoiding plugins helps keep your website lean and optimized for faster load times.
3. No Third-Party Dependence: You won’t have to worry about plugin updates, compatibility issues, or bloat from features you don’t need.
4. Customization: You can tailor the slider exactly to your website’s style and needs without being limited by the constraints of a plugin.

Prerequisites

Before we begin, you’ll need the following:

• A working WordPress website.
• Basic knowledge of HTML, CSS, and JavaScript.
• Access to your WordPress theme’s files or a child theme.

Steps to Create a Before and After Image Slider Using Code

Step 1: Add HTML Structure

The first step is to create the HTML structure for your before and after images. You can do this by editing your theme’s page.php file, creating a custom template, or using the custom HTML block in the WordPress block editor.

Here’s the basic HTML for a before and after slider:

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

Replace "path-to-before-image.jpg" and "path-to-after-image.jpg" with the URLs of your images.

Step 2: Add CSS for Styling

Now that we have the basic HTML, let’s style the slider using CSS. We need to make sure that both images are stacked on top of each other, with the slider handle allowing users to interact and see the difference between them.

Add this CSS to your theme’s style.css file:

.before-after-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* Adjust as needed */
    overflow: hidden;
}

.before-image img, .after-image img {
    display: block;
    width: 100%;
    height: auto;
}

.after-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Start at 50% */
    overflow: hidden;
}

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

This CSS sets the basic layout, ensuring that the before and after images stack properly, and includes a slider handle that users will drag to reveal the images.

Step 3: Add JavaScript for Interactivity

To make the slider functional, we’ll use JavaScript. This will allow the user to drag the slider handle left and right to reveal more or less of the before or after image.

Add the following JavaScript to your theme’s functions.php file or enqueue it as a separate script:

document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('.slider-handle');
    const beforeImage = document.querySelector('.before-image img');
    const afterImage = document.querySelector('.after-image');

    let isDragging = false;

    slider.addEventListener('mousedown', function(e) {
        isDragging = true;
    });

    document.addEventListener('mousemove', function(e) {
        if (isDragging) {
            let containerWidth = beforeImage.clientWidth;
            let offsetX = e.pageX - beforeImage.getBoundingClientRect().left;
            let percentage = (offsetX / containerWidth) * 100;

            if (percentage >= 0 && percentage <= 100) {
                afterImage.style.width = percentage + '%';
                slider.style.left = percentage + '%';
            }
        }
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
    });
});

This script enables the slider to be interactive, allowing users to click and drag the handle to adjust the before and after views dynamically.

Step 4: Enqueue JavaScript and CSS Files

To ensure that the JavaScript and CSS files load correctly, enqueue them in your functions.php file. If you placed the JavaScript in a separate file, use the following code:

function enqueue_before_after_slider_scripts() {
    wp_enqueue_style('before-after-slider-css', get_stylesheet_directory_uri() . '/css/before-after-slider.css');
    wp_enqueue_script('before-after-slider-js', get_stylesheet_directory_uri() . '/js/before-after-slider.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_before_after_slider_scripts');

Step 5: Test the Slider

After adding the HTML, CSS, and JavaScript to your WordPress theme, it’s time to test the slider. Open the page where you’ve embedded the slider code and interact with the handle to ensure it functions as expected. Adjust the image sizes or slider handle design as needed to fit your theme’s style.

Conclusion

Creating a before and after image slider in WordPress using custom code offers greater control over the appearance and performance of your website. With just a bit of HTML, CSS, and JavaScript, you can add an interactive element that enhances user engagement and visually demonstrates changes or comparisons. While plugins can be useful, this code-based approach allows for flexibility and reduced reliance on third-party tools.

Frequently Asked Questions (FAQs)

1. Can I create a before and after image slider without using a plugin in WordPress?

Yes, you can create a before and after image slider in WordPress using custom code. By adding HTML for the slider structure, CSS for styling, and JavaScript for interactivity, you can achieve the same effect as a plugin-based solution.

2. What are the benefits of creating a before and after slider using code instead of a plugin?

Using code to create a before and after slider can improve website performance by reducing the need for extra plugins. It also gives you full control over the slider’s functionality and appearance, allowing for custom designs and better optimization.

3. Do I need to know coding to create a before and after slider in WordPress?

Basic knowledge of HTML, CSS, and JavaScript is required to create a custom before and after slider. However, once you understand the steps, it’s relatively easy to implement even with beginner coding skills.

4. Is a code-based slider mobile-friendly?

Yes, the code provided can be made responsive with slight adjustments in CSS. By using media queries, you can ensure the slider works seamlessly across all devices, including mobile and tablets.

5. Can I customize the look of the before and after slider?

Absolutely! You can modify the CSS to adjust the appearance of the slider handle, the width of the images, and the overall design. You can also tweak the JavaScript to change how the slider behaves during interaction.

By following this guide, you can successfully create a before and after image slider in WordPress without the need for a plugin, maintaining flexibility and ensuring your site stays optimized.