[Help]: Centering the first card and the last card

[theRolento]

Summary

I have this slider that has 7 cards. The cards are like 600px width fo example.
I need the card1 to start at the center of the row, then when scrolling to the left they continue in the left blank space thru the browser margin and end with the card7 at the center of the row again (wih blank space on its right).
I can't figure out how to do it, i think i tried every possible way playing with margins too.
Align option doesn't seem to work (apparently).

As you can see from the picture, the slider starts at the left border with card1 and it ends with card7 at the border right.

.embla {
			overflow: hidden;

			.embla__container {
				display: flex;
			}
		}

.slide {
		flex: 0 0 100%;
		min-width: 0;
	}

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

No response

[sarussss]

Hi @theRolento
You can try option containscroll
containscroll: false
Example

[theRolento]

Hi @theRolento You can try option containscroll containscroll: false Example

OH MY GOD i can't believe it was so much simple...
The complicated way i found was to make two dummy empty divs around the cards and making a function for "auto-width them"...

Thank you!