Slides position is not in the left margin on mounted

[leephan2k1]

I followed the example: https://codesandbox.io/s/embla-carousel-slidestoscroll-react-forked-5lzuqp?file=/src/js/EmblaCarousel.js
But something is wrong when slides are initialized it has shifted to the right 582.6px

(I'm using tailwind, I think I switched the right style from css to tailwind)

I really want it to be in the left margin on initialization like this: translate3d(0px, 0px, 0px)

thanks for helping

[davidjerleke]

Hi @leephan2k1,

Thank you for your question. I can’t debug if you don’t provide a CodeSandbox reproducing the problem. It could literally be anything causing this.

Let me know if you intend to provide a CodeSandbox.

Best,
David

[leephan2k1]

Sorry for late response.
This is a CodeSandbox I tried to simulate my same problem
It always shifts to the right due to translate3d at initialization

https://codesandbox.io/s/embla-carousel-slidestoscroll-react-forked-2bonk2?file=/src/js/EmblaCarousel.js

[davidjerleke]

Hi @leephan2k1,

Thanks for the CodeSandbox. I found two problems:

1. If you want to clear leading and trailing empty space, add containScroll: trimSnaps:

const [viewportRef, embla] = useEmblaCarousel({
  slidesToScroll: 2,
  skipSnaps: false,
+ containScroll: "trimSnaps" // <-- add this
});

2. You're setting width on your slides but that's not how CSS flexbox works. If you want your slides to be 350px wide you need to do this:

.embla__slide {
  position: relative;
- width: 350px; // <-- remove this
+ flex: 0 0 350px; // <-- add this
}

...or

.embla__slide {
  position: relative;
  width: 350px;
+ flex: 0 0 auto; // <-- add this
}

I would suggest you to take some time to read the Embla documentation to learn how to setup your carousel, because these problems were caused by an incorrect setup:

• Guide - Slide Container
• Guide - Slide Sizes
• containScroll option

Best,
David

[leephan2k1]

Thanks a lot, I forgot to add containScroll option.

Sorry for the mistake in reading my document

[davidjerleke]

@leephan2k1 no worries. Just wanted to make you aware of the documentation which might be useful for you in other cases too.