[Bug]: Setting justify-content to center (for if all entries fit on screen) breaks carousel #1116
Open
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
- Create a regular horizontal carousel with items maybe 100px by 100px or so
- Add enough items that they do not all fit in view
Note this behaves as expected - 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 - 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 - 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. - 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