Webflow Slider on Scroll

This is how you can turn your native Webflow slider into a custom scrollable slider

‍

<pre><code class="language-markup"><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) {
      $(".arrow-right").trigger('tap');
    } else {
      $(".arrow-left").trigger('tap');
    }
  }, 300, true);

  $('.slider-main').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>
</code></pre>

Get the cloneable from here

https://webflow.com/made-in-webflow/website/slider-on-scroll

‍