search

davidjerleke / embla-carousel

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

Infinite scrolling issues #669

Closed smultar closed 6 months ago

smultar commented 6 months ago

Bug is related to

Embla Carousel version

Describe the bug

CodeSandbox

Sandbox code

Steps to reproduce

  1. Make a project based on embla templates.
  2. Ensure the loop is set to true
  3. Try swiping
  4. See visual error

Expected behavior

I'm expecting the slide to keep scrolling in the direction the user is dragging in. In this case, the slide stops at the end and goes in the opposite direction back to the start.

Additional context

The issue doesn't appear on the code-sandbox, however it does appear with NextJS

davidjerleke commented 6 months ago

@smultar please try setting SWCminify: false and let me know if the problem persists. If it solves the problem, please take a moment to read this. If the problem doesn't go away, please read the test case exceptions information in the contribution guidelines in order to add the missing information in this bug report.

Best, David

smultar commented 6 months ago

image

The issue persists, as shown

[Removed due to content contained in the video]

I can provide access to the source code, but it's a private repository.

davidjerleke commented 6 months ago

@smultar please create a temporary public repository with a reduced test case. Meaning with only stuff that's necessary in order to reproduce the bug and unnecessary details stripped.

smultar commented 6 months ago

Ask and you shall receive @davidjerleke .

https://github.com/smultar/aetherlink.embla-carousel

davidjerleke commented 6 months ago

@smultar I haven’t had the time to setup your repository locally but I found this line. You shouldn’t add any CSS transitions to the carousel container because Embla does the transition with javascript and this will break the carousel animation.

I’m not 100% sure that this is the only thing with the setup causing the problem you describe but you need to remove the CSS transition there.

Best, David

smultar commented 6 months ago

Hey @davidjerleke, you are correct, adding animations to the embla container can affect infinite scrolling.

Removing the transition effect resolves #669