[Help]: Center slides in case their total width is less than the container

[rudokotrla]

Summary

Hello, I have a related (but not 100% same question) so I will dump it here instead of creating a new thread.
I would like to make slides centered but only in case the total sum of slides' width (+ the gaps in between) is less than the available container viewport width. The align: 'center' option itself doesn't work.
So instead of this:

I would like the carousel to looks like this:

What I've tried is setting justify-content: center on the container (with flex layout) but this breaks the behaviour when there is more items (so scrolling is needed):

I've checked out the proposed solution to the original question of this thread but it makes the carousel slides centered in all cases so also in case when there is enough slides to scroll, which is not what I want. In that case I would like to have practically align: 'start' behaviour.

So far I settled up with a bit hacky solution that sets the justify-content: center style on the container only when api.slidesInVIew().length equal to api.slidesNodes().length (all slides). It is done by adding event handler to the slidesInView that checks the condition and updates React state according to which is the justify-content: center either added to the container or not.

I've tried to go through the docs to find an option (or combination of some) that would allow for this behaviour but not found any. Probably I miss sth, though. I think it is a very basic use case to support.

The codesanbox provided is the very same as the generated one (React + horizontal + left to right + 20% slide width + 10px gap + align: center) , the only thing changed is the number of slides.

Any tips/helps is much appreciated 🙏 and thanks for developing and maintaining this library, it is awesome 💪

If applicable, which variants of Embla Carousel are relevant to this question?

• 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)

Additional information

No response

CodeSandbox example

https://codesandbox.io/p/sandbox/embla-carousel-generator-react-forked-pggc54

[davidjerleke]

@rudokotrla try this CodeSandbox.

[sarussss]

Hi @davidjerleke
You can add a CodeSandbox for Vanilla JS?

[davidjerleke]

@sarussss sure, I can do that next week.

[sarussss]

@davidjerleke Thank you!
I tried a CodeSandbox.
When you have time, can you check and help me see if the code can be optimized?

[davidjerleke]

@sarussss I think your solution makes sense. Thanks for providing it!

• Sandbox Vanilla - Thanks @sarussss!
• Sandbox React