Cannot scroll to last item if has many items

first, thanks for you library it’s very helpful for my work.

I have some issue when the container has lot of items. ( Ex. 50 items with 150px of width)

I look in the element inspector

this code transform: translate3d(-1805.47%, 0px, 0px)

I guess it’s always back to -1800%

how to increase?

[davidjerleke]

Hello again @khanitnanj,

Thank you for the CodeSandbox, it helped me debug why you’re experiencing this issue 👍.

Please use padding instead of margin for spacing between slides, like the Basic Setup CodeSandbox on the embla-carousel-react readme shows.

Embla won’t take the slide margins into account when reading the slide widths, which is why you can’t reach the last slide because the margins of 50 slides will stack up. But the padding will be included when reading the slide widths. This of course, assuming that you’re using the box-sizing: border-box; property as default like so:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

Read more about why you would want to use the border-box as default in this article and on this StackOverflow question.

Let me know if this helps!

Cheers David

[davidjerleke]

Hi again @khanitnanj,

For what it’s worth, Embla Carousel now supports margin and any other means that will render spacing between your slides. You’re not forced to use the padding approach anymore. And it will automatically detect your spacings!

This feature was released with version 4.2.0. Read more about it here if you’re interested.

Kindly, David