Streaming live at 10am (PST)

Trigger slides with mouse scroll?


#1

Hey guys, I’m trying to make a full-view height slider change slides on mouse scroll up and down. I’m using the generic slider element in webflow with a few interactions.

I’ve made a mockup to better illustrate what I mean with the script included: http://scrollslider.webflow.io/

Update 06/09-18:
I used the code:

<script>
window.addEventListener('wheel', function(e) {
  if (e.deltaY < 0) {
    console.log('scrolling up');
    $('.w-slider-arrow-left').trigger('tap');
  }
  if (e.deltaY > 0) {
    console.log('scrolling down');
    $('.w-slider-arrow-right').trigger('tap');
  }
});
</script>

I got the script to scroll though the slides like I wanted, but it scrolls very fast. Any idea how to make one action trigger the interaction?


#2

How to determine scroll direction


#3

Thanks Samliew, I combined the code you linked with my previous code and it works.
Any idea how to slow it down?

See the link http://scrollslider.webflow.io/


#4

I previously looked into this and recall exploring two different approaches. I never followed through with implementation but figure it still may be helpful to share some of my insights.

Approach 1:
Custom script that works with the native slider component .js code. This approach is very risky since we don’t know if/when Webflow will update their codebase.

Approach 2:
Custom script that calls the prev/next slide based on wheel event (exactly as you have), with the following additions:

  • Binding the script’s wheel event within a specific div - This is important if you dont plan to have the slider take up entire page.
  • Adding Debounce function to ensure the task doesn’t fire so often that it messes up performance (I believe this addresses your speed concern).

Approach 3:
Using something completely outside the native Webflow codebase (ex. Swiper.js)


#5

UPDATE Script should now work on all browsers

Here is a working demo with all of the features noted in my ‘Approach 2’.


#6

I’ve updated the demo referenced above. It should now work for all browsers.


#7

Thank you very much!
Nice profile, I see you are inspired by Oui Will aswell, that’s actually why I was making this slider in the first place :blush: