Estoy tratando de implementar la siguiente configuración:

Cuando un usuario se desplaza hacia abajo en mi página web, quiero que el desplazamiento funcione normalmente, hasta que llegue a una sección donde tengo un control deslizante. Una vez que esta sección esté en la ventana gráfica, el sitio web debería dejar de desplazarse hacia abajo en la página y el control deslizante debería desplazarse de la diapositiva 1 a la diapositiva 2. Cuando terminen las diapositivas, la página debería continuar desplazándose normalmente de nuevo.

Lo mismo debería suceder cuando el usuario se desplaza de abajo hacia arriba.

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

Conseguí que funcione principalmente en el escritorio, pero desafortunadamente, no funciona en el móvil. Las diapositivas también se desplazan infinitamente. Después de la diapositiva 2, la página debería seguir desplazándose normalmente.

 <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>