Enable horizontal scrolling on slider

[Dekadinious]

I am confused about how to enable horizontal scrolling on the slider. If I enable "wheel", then the page will stop scrolling vertically as the mouse reaches a slider, and the slider starts scrolling horizontally. But I want to enable touch pad horizontal scrolling on the slider. So that when someone has their mouse over the slider and scrolls horizontally (like with two fingers on a Mac), the slider will scroll. But when scrolling vertically the page will scroll.

Is this possible?

[Dekadinious]

I am following up here if anyone knows if this is possible?

[Dekadinious]

For anyone stumbling upon this, I solved it using the following code. The function should be passed the element to be scrollable and the Splide-instance. It could probably be solved better, but it works.

function allowSidewaysScroll(element, splide) {
        let debounceDelay = 500;
        let lastScrollTime = Date.now();

        //Add horizontal scrolling support to splide sliders
        element.addEventListener('wheel', function (event) {

            if (event.ctrlKey) {
                return; // Exit the function if Ctrl key is held
            }

            let deltaX = event.deltaX;
            let deltaY = event.deltaY;

            //Windows shift-scroll
            if (event.shiftKey && Math.abs(deltaX) === 0) {
                event.preventDefault();

                if (deltaY > 0) {
                    splide.go('+3');

                } else if (deltaY < 0) {
                    splide.go('-3');
                }
            }

            //Mac sideways touch scroll
            if (!event.shiftKey && Math.abs(deltaX) !== 0) {
                if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
                    // Scrolling more vertically than horizontally. Let it be!
                    return;
                }

                const scrollLeftMax = element.scrollWidth - element.offsetWidth

                if (
                    element.scrollLeft + event.deltaX < 0 ||
                    element.scrollLeft + event.deltaX > scrollLeftMax
                ) {
                    //Stop backwards nagivation on sideways scroll on element
                    event.preventDefault();
                }

                let currentTime = Date.now();
                let timeElapsed = currentTime - lastScrollTime;

                //Allow no delay on first scroll of slider per second
                if (timeElapsed > 1000) {
                    if (deltaX > 0) {
                        splide.go('+3');
                    } else if (deltaX < 0) {
                        splide.go('-3');
                    }

                    lastScrollTime = currentTime;
                } else {
                    //Debounce scrolling to avoid scrolling to the end of the slider on first scroll
                    if (timeElapsed >= debounceDelay) {

                        if (deltaX > 3) {
                            splide.go('+3');
                        } else if (deltaX < -3) {
                            splide.go('-3');
                        }

                        lastScrollTime = currentTime;
                    }
                }
            }
        }, false);
    }

[lvigerust]

I've been looking for a solution like this for so long!
Would you care to elaborate what you mean with "The function should be passed the element to be scrollable and the Splide-instance."? I have not been able to make it work quite yet.

I would very much appreciate it!

So close... yet so far.

[Dekadinious]

Of course!

So in my case the implementation looks something like this:

//Splide sliders

const splideOptions = {
    autoHeight: true,
    lazyLoad: false,
    perPage: 2,
    pagination: false,
    gap: "0.5rem",
    autoplay: false,
    flickMaxPages: 1,
    flickPower: 400,
    arrows: false,
    padding: { left: 0, right: "10%" },
    mediaQuery: "min",
    breakpoints: {
        800: {
            gap: "1rem",
            padding: { left: 0, right: "5%" },
            perPage: 5,
        },
    },
};

$(".flexible-content-product-slider").each(function (index) {
    let splide = new Splide($(this)[0], splideOptions).mount();

    splide.on("moved", () => {
        let limit = 5;
        let padding = "5%";

        if (is_mobile()) {
            limit = 2;
            padding = "10%";
        }

        if (splide.length - splide.index === limit) {
            splide.options = {
                padding: { left: padding, right: 0 },
            };
        } else if (splide.index === 0) {
            splide.options = {
                padding: { left: 0, right: padding },
            };
        }
    });

    allowSidewaysScroll($(this)[0], splide);

});

So every element on the page with the class .flexible-content-product-slider is becoming a Splide slider. I save the slider in a variable and pass this to the function along with the element itself "$(this)[0]". This is the HTML-element with the class .flexible-content-product-slider.

Hope it helps!

[spencercap]

I was looking for a similar solve when my client asked to enable horizontal scrolling using two-fingers via the trackpad.

in this case, each slide also contains vertically scrollable content, so enabling wheel: true was on the right path but....

1. the wheel event handler is pinned to deltaY instead of deltaX as desired for a more natural UX (though not web accessible I'm sure...)
2. the handler also carries out a event.preventDefault() which blocks each slide/column from being scrolled vertically

i was able to temporarily modify splide's source code in chrome dev tools to solve both of these which leads me to want to make a PR for the repo that adds options like wheelDirection: 'x' | 'y' (for settings use of deltaX or deltaY), wheelPreventX: false, wheelPreventY: true

in this demo i scroll left and right and the up and down:
video: https://github.com/user-attachments/assets/86ed9c3e-829c-4589-af3b-349f4cf822d0
gif:

also if anyone has any thoughts for a good api syntax to support something like "disable snapping during this wheel event" i can implement it in the same PR

[spencercap]

note to self: if i (or someone else) implements this as a PR, be sure to include options similar to this extension from embla:
https://github.com/xiel/embla-carousel-wheel-gestures
...or just use embla's carousel., it seems more active.