Question: Can we move to the next slide on "scroll"?

[mattfranciswork0]

Reading the documents, it looks like we have to drag it to move to the next slide. I have a vertical carousel, I want it to move to the prev or next slide when the user scrolls up or down.

Here's a codesandbox of what I'm trying to accomplish with the vertical carousel (Click on the console tab for the scroll functionality to work, I believe it's a bug with codesandbox).

https://codesandbox.io/s/embla-carousel-y-axis-react-forked-vdb6f?file=/src/js/EmblaCarousel.js

[davidjerleke]

Hi Matthew (@mattfrancis888),

Maybe you’re looking for the Embla Carousel Wheel Gestures package?

Let me know if this is the case.

Best, David

[mattfranciswork0]

Hi David,

Thank you so much for your response! It is exactly what I'm looking for. However, I tried it out and it looks like it's a bit 'snappy':

https://codesandbox.io/s/embla-carousel-y-axis-react-forked-0ujpt?file=/src/js/EmblaCarousel.js

When scrolling down or up (by using a trackpad) it does not seem to do it smoothly. Is there an implementation detail I'm missing?

Thank you

[davidjerleke]

Hi Matthew (@mattfrancis888),

I tried it out and it looks like it's a bit 'snappy'

Are you referring to the behavior when it snaps to closest scroll snap when the wheel is released?

When scrolling down or up (by using a trackpad) it does not seem to do it smoothly.

If you scroll the carousel with your pointer (mouse/touch) instead, is it scrolling smoothly then?

Best, David

[mattfranciswork0]

Hi David,

Are you referring to the behavior when it snaps to closest scroll snap when the wheel is released?

Yes! Other than the sandbox showing what happens, here's another demonstration of the snapping behaviour (gif): https://gyazo.com/0957c3190a703651e9374e756e5ffc25

Is it as intended?

If you scroll the carousel with your pointer (mouse/touch) instead, is it scrolling smoothly then?

Unfortunately, the behaviour is the same.

Matt

[davidjerleke]

Hi Matthew (@mattfrancis888),

Is it as intended?

Yes I think so. I didn't create that package so I skimmed through the code, and as far as I see, it's built this way.

Unfortunately, the behaviour is the same.

Are you experiencing the same stuttering when dragging any carousel on the documentation website? Because I can't reproduce the stuttering you're mentioning when scrolling by dragging or clicking on navigation buttons there.

Best, David

[mattfranciswork0]

Hi David,

Are you experiencing the same stuttering when dragging any carousel on the documentation website?

Oh no, that works fine! Your examples in the documentation work perfectly.

The 'problem' only occurs with the Wheel Gestures Package during a scroll up / scroll down interaction with a mousewheeel or trackpad rather than a "dragging" interaction.

It looks like it wasn't the wheel Gestures wasn't I'm exactly looking for - I ended up creating my own scroll functionality that will move to the next / prev slide depending on the scroll direction.

Here's the sandbox if it helps anyone (Again, Click on the console tab for the scroll functionality to work, I believe it's a bug with codesandbox):

https://codesandbox.io/s/embla-carousel-y-axis-react-forked-2jrbg?file=/src/js/useScrollDirection.js

Thank you again for your help and quick response David.

Matt

[davidjerleke]

Hi Matthew (@mattfrancis888),

Oh no, that works fine! Your examples in the documentation work perfectly.

I see. Thanks for the clarification 👍.

(Again, Click on the console tab for the scroll functionality to work, I believe it's a bug with codesandbox)

I think this is happening because opening the console tab will reduce the window height and make it scrollable? It seems like you're listening to the window scroll event but this may cause issues. Especially if the carousel is placed at the top or the bottom of the page and you're trying to scroll past any of the window ends (whether it's the top or bottom of the page).

Example:

If the carousel is placed at the top of your page, and the Y scroll position is 0 (meaning top of the page), you won't be able to scroll upwards and trigger a scroll event. I think you rather need to listen to the wheel event like so:

element.addEventListener('wheel', () => {
  // Your code
}, false)

Because this will trigger anytime you scroll with your mouse wheel or trackpad. If you open your example in App view, you'll see that the trackpad or mouse wheel won't work unless you lower the height of the browser window until it's scrollable. More about the wheel event over here on MDN.

I hope this makes sense.

Cheers, David

[mattfranciswork0]

Hi David,

Thank you so much for offering a better solution! I will definitely implement the wheel event rather than the scroll event! I don't have anything else to add for this issue, feel free to close it; again, appreciate all your help and responses!

Matt,

[davidjerleke]

Thanks Matt @mattfrancis888. Good luck and enjoy!

Best, David