Before and After Slider Code for Showit (Step-by-Step)

Adding a before and after slider to your Showit website is one of the easiest ways to create an interactive experience for your visitors. Whether you’re showcasing design work, photography edits, home makeovers, or any other visual transformation, this slider is a great way to compare two images side by side.

The best part? You don’t need any fancy integrations or third-party apps. Just use Showit’s Embed Code Box, paste in a little code, and you’re good to go.

Step-by-Step Guide: Creating a Before and After Slider in Showit

Step 1: Add an Embed Code Box in Showit

1. Open your Showit designer and go to the page where you want the slider.
2. Click Embed Code from the left panel and drag it onto your canvas.
3. Resize the box however you want—Showit lets you make it as wide or tall as you need. (This is especially great if you’re using portrait or landscape images.)

💡 Tip: If your slider will be full-width, set the embed box to stretch across the canvas. If you want it inside a section, just resize it to fit the layout.

Step 2: Paste the Before and After Slider Code

Now, let’s add the actual slider code.

1. Click on the Embed Code Box, then hit Custom Code in the right sidebar.
2. Paste the following code inside the box:

<div class="img-comp-container" id="img-comp-container">
    <!-- BEFORE image -->
    <div class="img-comp-img">
        <img src="BEFORE_IMAGE_URL" alt="Before">
    </div>
    <!-- AFTER image overlay -->
    <div class="img-comp-img img-comp-overlay">
        <img src="AFTER_IMAGE_URL"
            alt="After">
    </div>
</div>

<style>
    .img-comp-container {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .img-comp-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .img-comp-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center;
    }

    .img-comp-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        clip-path: inset(0 50% 0 0);
    }

    .img-comp-slider {
        position: absolute;
        z-index: 10;
        cursor: ew-resize;
        width: 65px;
        height: 100%;
        top: 0;
        left: calc(50% - 32.5px);
        background: transparent;
    }

    .img-comp-slider-handle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 5px;
        height: 100%;
        background-color: #333;
    }

    .img-comp-slider-arrows {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        pointer-events: none;
        padding: 0 5px;
    }

    .img-comp-slider-arrows svg {
        fill: none;
        stroke: #333;
        stroke-width: 2;
    }

    @keyframes demoSlideOverlay {
        0% {
            clip-path: inset(0 50% 0 0);
        }

        20% {
            clip-path: inset(0 47% 0 0);
        }

        40% {
            clip-path: inset(0 50% 0 0);
        }

        60% {
            clip-path: inset(0 53% 0 0);
        }

        80% {
            clip-path: inset(0 50% 0 0);
        }

        100% {
            clip-path: inset(0 50% 0 0);
        }
    }

    @keyframes demoSlideSlider {
        0% {
            left: calc(50% - 32.5px);
        }

        20% {
            left: calc(53% - 32.5px);
        }

        40% {
            left: calc(50% - 32.5px);
        }

        60% {
            left: calc(47% - 32.5px);
        }

        80% {
            left: calc(50% - 32.5px);
        }

        100% {
            left: calc(50% - 32.5px);
        }
    }
</style>

3. Replace BEFORE_IMAGE_URL and AFTER_IMAGE_URL with the actual links to your images.
4. Click Save, then Publish your Showit site.

💡 Tip: The easiest way to get URL image links is to add your before and after image files to your Showit media library. Then click the link icon to copy the image URL.

Step 3: Add the Before and After Slider JavaScript

Add this code to the page’s “inline JavaScript section under Advanced Settings in Showit

window.addEventListener('load', function () {
    function initComparisons() {
        var containers = document.querySelectorAll(".img-comp-container");

        containers.forEach(function (container) {
            var overlay = container.querySelector(".img-comp-overlay");

            var sliderContainer = document.createElement("div");
            sliderContainer.className = "img-comp-slider";

            var sliderHandle = document.createElement("div");
            sliderHandle.className = "img-comp-slider-handle";
            sliderContainer.appendChild(sliderHandle);

            var sliderArrows = document.createElement("div");
            sliderArrows.className = "img-comp-slider-arrows";
            sliderArrows.innerHTML = `
                    <span class="left-arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24">
                            <polyline points="15 18 9 12 15 6" />
                        </svg>
                    </span>
                    <span class="right-arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24">
                            <polyline points="9 6 15 12 9 18" />
                        </svg>
                    </span>`;
            sliderContainer.appendChild(sliderArrows);

            container.insertBefore(sliderContainer, overlay);

            var containerWidth = container.offsetWidth;
            var mid = containerWidth / 2;

            overlay.style.clipPath = "inset(0 " + (containerWidth - mid) + "px 0 0)";
            sliderContainer.style.left = (mid - sliderContainer.offsetWidth / 2) + "px";

            var observer = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        sliderContainer.style.animation = 'demoSlideSlider 1.5s ease-in-out 1';
                        overlay.style.animation = 'demoSlideOverlay 1.5s ease-in-out 1';
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 });

            observer.observe(container);

            var active = false;

            function cancelDemo() {
                sliderContainer.style.animation = "";
                overlay.style.animation = "";
                overlay.style.clipPath = "inset(0 " + (containerWidth - mid) + "px 0 0)";
                sliderContainer.style.left = (mid - sliderContainer.offsetWidth / 2) + "px";
            }

            sliderContainer.addEventListener("mousedown", function (e) {
                active = true;
                cancelDemo();
                e.preventDefault();
            });
            window.addEventListener("mouseup", function () {
                active = false;
            });
            window.addEventListener("mousemove", function (e) {
                if (!active) return;
                slide(e);
            });

            sliderContainer.addEventListener("touchstart", function () {
                active = true;
                cancelDemo();
            });
            window.addEventListener("touchend", function () {
                active = false;
            });
            window.addEventListener("touchmove", function (e) {
                if (!active) return;
                slide(e.touches[0]);
            });

            function slide(e) {
                var pos = getCursorPos(e);
                if (pos < 0) pos = 0;
                if (pos > containerWidth) pos = containerWidth;
                overlay.style.clipPath = "inset(0 " + (containerWidth - pos) + "px 0 0)";
                sliderContainer.style.left = (pos - sliderContainer.offsetWidth / 2) + "px";
            }

            function getCursorPos(e) {
                var rect = container.getBoundingClientRect();
                var x = e.pageX - rect.left - window.scrollX;
                return x;
            }
        });
    }
    initComparisons();
});

Step 4: Adjust the Embed Code Box for Your Layout

Since Showit doesn’t automatically size embedded elements, you may need to tweak the Embed Code Box dimensions so the slider displays correctly.

• If your images are tall (portrait) → Make the embed box taller.
• If your images are wide (landscape) → Make it wider.
• If you want full-width → Set the embed box to stretch across the canvas.

Check your mobile layout too! Showit lets you adjust embed elements separately for desktop and mobile, so make sure everything looks good on smaller screens.

Why Showit is Perfect for Custom Code (Like This Slider)

One of the biggest perks of using Showit is that it gives you complete design freedom while still letting you integrate custom features. If you’ve ever worked with platforms that restrict custom code (cough Wix cough), you’ll love how easy Showit makes it.

Here’s why Showit is the best for embedding things like this before and after slider:

• Drag-and-Drop Meets Custom Code: Unlike most website builders, Showit lets you add fully custom elements while still using an intuitive visual editor. You’re never stuck with just what the platform offers.
• Resizable Embed Code Boxes: Other platforms lock embedded content into predefined sizes. Showit lets you scale your embed box however you want.
• Works Seamlessly with Showit’s Mobile Editor: Unlike some embeds that break on mobile, you can control how this slider displays separately for desktop and mobile.

This is exactly why I love recommending Showit to designers who want full creative control. If you’re not already using Showit, click here to sign up and try it out!

Final Thoughts

This before and after slider is an easy way to add interactivity to your Showit website, and you don’t need any advanced coding skills to make it work.

To recap:

1. Add an Embed Code Box in Showit.
2. Paste the slider code (replace the image URLs).
3. Resize the box to fit your layout.
4. Preview & Publish. Done!

That’s it! If you run into any issues, double-check your image links and make sure your Embed Code Box is sized correctly.

Need help? Drop a comment below! And if you haven’t switched to Showit yet, try it out here!

Happy designing! 🚀