search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.37k stars 164 forks source link

[Bug]: Slide hanging if overdragged/scrolled #785

Closed DanielSpindler closed 3 weeks ago

DanielSpindler commented 3 months ago

Which variants of Embla Carousel are you using?

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.

https://github.com/davidjerleke/embla-carousel/assets/71325321/e76122c3-c6d6-4d2b-8763-1f00f24ad095

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

davidjerleke commented 3 months ago

Hi @DanielSpindler,

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

Thanks for doing it for me.

Best, David

DanielSpindler commented 3 months ago

Thanks alot and no Problem!

Greetings, Daniel

chiumax commented 2 months ago

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 commented 1 month ago

@DanielSpindler and/or @sarussss,

Can you reproduce this problem in this CodeSandbox?

sarussss commented 1 month ago

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

DanielSpindler commented 1 month ago

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 commented 1 month ago

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

DanielSpindler commented 1 month ago

@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 commented 1 month ago

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

DanielSpindler commented 1 month ago

@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 commented 1 month ago

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

davidjerleke commented 3 weeks ago

A bug fix for this will be included in the next release.

davidjerleke commented 2 weeks ago

@sarussss and @DanielSpindler a bug fix for this was just released in v8.1.4.