Trigger slides with mouse scroll?

Design help Custom code
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

1 Like
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’.

2 Likes
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:

8

Hey CJ. Thanks so much for making this open source. I was curious if you know of an easy way to make the mouse event trigger for left or right scrolls only? I’d like for the user to be able to scroll the slider horizontally, but keep the up and down scrolling normal. Thanks again!

Jose