Plug and Play

Webflow Before & After Image slider by Pixeto

Discover the seamless integration of our custom-built Before & After Image Slider, designed to enhance your Webflow projects effortlessly.

Features:

Attribute Solution

Easy to set up

Optimised for diff. browsers

1. Set the Basic HTML Layout

We have a fairly simple HTML structure here: a wrapper with a relative position, 'before' and 'after' divs with absolute positions, and one handle element with an absolute position. The wrapper has defined height and width, and the 'before' and 'after' divs contain their respective images.

2. Add these attributes to the respective elements:

for the wrapper, use [px-slider="wrapper"]; for 'before', use [px-slider="before"]; for 'after', use [px-slider="after"]; and for the handle,
use [px-slider="handle"]. Adding these attributes is crucial because they bind the code to the elements. If you intend to modify these, ensure you update the code accordingly.

3. Add this Code before closing /body tag

<script>
(function() {
    "use strict";

    const beforeSelector = '[px-slider="before"]';
    const afterSelector = '[px-slider="after"]';
    const handleSelector = '[px-slider="handle"]';
    const wrapperSelector = '[px-slider="wrapper"]';

    class Slider {
        constructor(element) {
            this.element = element;
            this.before = element.querySelector(beforeSelector);
            this.after = element.querySelector(afterSelector);
            this.handle = element.querySelector(handleSelector);
            this.isDragging = false;
            this.isClick = false;

            this.initEvents();
        }

        initEvents() {
            this.handle.addEventListener("mousedown", this.onDragStart.bind(this));
            document.addEventListener("mousemove", this.onDrag.bind(this));
            document.addEventListener("mouseup", this.onDragEnd.bind(this));
            this.handle.addEventListener("touchstart", this.onDragStart.bind(this), { passive: false });
            document.addEventListener("touchmove", this.onDrag.bind(this), { passive: false });
            document.addEventListener("touchend", this.onDragEnd.bind(this), { passive: false });
            
        
            this.element.addEventListener("mousedown", this.onClickStart.bind(this));
            this.element.addEventListener("mouseup", this.onClickEnd.bind(this));
        }

        onDragStart(event) {
            this.isDragging = true;
            this.isClick = false; // Reset click flag
            this.onDrag(event);
        }

        onDrag(event) {
            if (!this.isDragging) return;
            this.updatePosition(event);
        }

        onDragEnd() {
            this.isDragging = false;
        }

        onClickStart(event) {
            this.isClick = true;
        }

        onClickEnd(event) {
            if (this.isClick) {
                this.updatePosition(event);
                this.isClick = false;
            }
        }

        updatePosition(event) {
            let clientX = event.clientX || (event.touches && event.touches[0].clientX);
            const rect = this.element.getBoundingClientRect();
            let offsetX = clientX - rect.left;

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

            const percentage = (offsetX / rect.width) * 100;

            this.handle.style.left = `${percentage}%`;
            this.after.style.width = `${100 - percentage}%`;
        }
    }

    document.addEventListener("DOMContentLoaded", () => {
        document.querySelectorAll(wrapperSelector).forEach(element => {
            new Slider(element);
        });
    });
})();
</script>

Made with ❤️ by Pixeto.co