I am trying to implement the following setup:

When a user scrolls down my web page, I want scroll to function normally, until they reach a section where I have a slider. Once this section is in the viewport, the website should stop scrolling down the page, and the slider should scroll from slide 1 to slide 2. When the slides are finished, the page should continue to scroll as normal again.

The same should happen when the user is scrolling from bottom to top.

https://project-1-6122b1.webflow.io/slider

I have gotten it to mostly work on desktop, but unfortunately, it does not work on Mobile. The slides also just infinitely scroll. After slide 2, the page should cacrry on scrolling as normal.

<script>
    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this,
                args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }

    var onScroll = debounce(function(direction) {
        if (direction == false) {
            $("#w-slider-arrow-right").trigger('tap');
        } else {
            $("#w-slider-arrow-left").trigger('tap');
        }
    }, 200, true);

    $('#slider').bind('wheel mousewheel', function(e) {
        e.preventDefault();
        var delta;
        if (typeof event != 'undefined' && event.wheelDelta) {
            delta = event.wheelDelta;
        } else {
            delta = -1 * e.originalEvent.deltaY;
        }
        onScroll(delta >= 0);
    });
</script>