[Bug]: Slide hanging if overdragged/scrolled

[DanielSpindler]

Which variants of Embla Carousel are you using?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Steps to reproduce

The bug occurs when I "overscroll/drag" the slides

i got an example sandbox https://codesandbox.io/p/sandbox/embla-carousel-default-react-ww73yq?file=%2Fsrc%2Fjs%2FEmblaCarouselArrowButtons.tsx from the docs and tried it there to reproduce.

Bildschirmaufnahme.2024-03-05.um.18.01.08-1.mov

Expected Behavior

Jumping back

Additional Context

I have also tried :
Google Chrome
Firefox
Safari

And also tried to implement a "overscroll" workaround from the issues which sadly jumped around, but not related.

I've searchd the issues and docs throughly and found nothing that could be directly related.

What browsers are you seeing the problem on?

No response

Version

v8.0.0

CodeSandbox

https://codesandbox.io/p/sandbox/embla-carousel-default-react-ww73yq?file=%2Fsrc%2Fjs%2FEmblaCarouselArrowButtons.tsx

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues
• I agree to follow this project's Contributing Guidelines for bug reports

[davidjerleke]

Hi @DanielSpindler,

This was reported by @sarussss here but I haven’t had the time to create a bug report:

• [Help]: Error when dragging far outside the container #777

Thanks for doing it for me.

Best,
David

[DanielSpindler]

Thanks alot and no Problem!

Greetings,
Daniel

[chiumax]

hey guys, running into the same issue with the WheelGesturesPlugin here's a snippet that sort of fixes this issue:

 embalaApi.on('settle', (api: CarouselApi) => {
        if (!api) {
          return;
        }
        const { limit, location, scrollTo } = api.internalEngine();
        if (location.get() > limit.max) {
          scrollTo.index(0, 0);
        }
        if (location.get() < limit.min) {
          scrollTo.index(embalaApi.scrollSnapList().length - 1, 1);
        }
      });

Ideally it would be nice to reset the momentum early so it never gets to this or take so long to rubber band back.

[davidjerleke]

@DanielSpindler and/or @sarussss,

Can you reproduce this problem in this CodeSandbox?

[sarussss]

Hi @davidjerleke
I checked, the problem I had before has been resolved, great!

[DanielSpindler]

https://codesandbox.io/p/sandbox/embla-carousel-default-react-forked-vcjj84?file=%2Fsrc%2Fjs%2FEmblaCarouselArrowButtons.tsx updated the other CodeSandBox for now @davidjerleke, @sarussss seems like it is not gone, will update it in a live app today and give a feedback after

[davidjerleke]

@DanielSpindler did you try the CodeSandbox in this comment? Because a fix for this has not released yet!

[DanielSpindler]

@davidjerleke my fault ive been reading it wrong sorry! do you have a version with
"embla-carousel-wheel-gestures": "^8.0.0-rc05"
cant reproduce with dragging anymore

[davidjerleke]

@DanielSpindler you can fork the CodeSandbox and add the Wheel Gestures plugin and test it if you want.

[DanielSpindler]

@davidjerleke https://codesandbox.io/p/sandbox/bug-785-forked-psk7k8?file=%2Fsrc%2Fjs%2Fembla-carousel.js%3A1857%2C25-1857%2C30 seems to work just fine, cant reproduce anymore

[davidjerleke]

Thanks @sarussss and @DanielSpindler. I'll throw a comment in here once the bug fix has been released.