Skip to content

[Bug]: Setting justify-content to center (for if all entries fit on screen) breaks carousel #1116

Open
@GNUGradyn

Description

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-fade
  • embla-carousel-docs (Documentation)
  • embla-carousel-docs (Generator)

Steps to reproduce

  1. Create a regular horizontal carousel with items maybe 100px by 100px or so
  2. Add enough items that they do not all fit in view
    Note this behaves as expected
  3. Reduce the number of items such that all the items easily fit in view at once
    Note this behaves as expected as well but is left-justified which is probably not what you want
  4. use justify-content: center to center the carousel contents
    Note this behaves as expected, the elements are in the center of the carousel since there are not enough to fill the view
  5. Add some items back so there are more then fit in view again
    Note the carousel now behaves erratically. Dragging items will sometimes cause them to disappear and reappear or the entire thing to jump around etc.
  6. Remove the justify-content: center
    Note the carousel behaves as expected again confirming this was the issue

Expected Behavior

with justify-content: center:

  • The carousel should behave as it currently does when the carousel contents are small enough to fit entirely within view at once.
  • The carousel should behave as it would if it didn't have justify-content: center when the carousel contents do not fit entirely within view at once, since the items fill the view so justification is irrelevant

Additional Context

Workaround in the mean time might be disabling embla entirely when there is no overflow, either by replacing the entire carousel with a simple map or by some other means

What browsers are you seeing the problem on?

Firefox

Version

v8.5.2

CodeSandbox

https://codesandbox.io/p/sandbox/jjzfgf

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

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions