White space after the last slide

[haroldao]

Bug is related to

• [x] embla-carousel (core package)
• [ ] embla-carousel-react
• [ ] embla-carousel-vue
• [ ] embla-carousel-svelte
• [ ] embla-carousel-autoplay
• [ ] embla-carousel-auto-height
• [ ] embla-carousel-class-names
• [ ] embla-carousel-docs (documentation website)

Embla Carousel version

• v7.0.5

Describe the bug

• There is a big spacing after the last slide.

Codepen

• https://codepen.io/haroldao/pen/KKeRbYQ

[haroldao]

[davidjerleke]

Hi @haroldao,

Thanks for your question. The problem you describe is most likely caused by faulty CSS and not the Embla engine. You can confirm if this is the case by disabling the Embla script entirely and see how your carousel looks without it. If the space is still there, it’s a CSS problem on your side.

I’m not sure what you want to achieve, but if I were to guess, you want a setup like this example in the docs (but of course, with different spacing etc.). Try working with the CSS in that example and customize it.

Best, David

[haroldao]

Hi David! My bad!

Thank you, I'll take a look at it :)

[haroldao]

I've updated my Codepen... I still have the issue ... 👀

[davidjerleke]

@haroldao it doesn’t seem like your slides are respecting their sizes because the content is stretching them:

flex: 0 0 calc(30% - 3.2rem);

…This can happen sometimes so try adding min-width: 0; to your slides. Also, use the box sizing: border-box; approach (read here why) on all your CSS. You didn’t apply spacing the same way as in the example. Set the spacing as padding-left on the slides and the same amount spacing as negative margin-left on the container. See the screenshot:

Additionally, remove all other margins and paddings you’ve added when trying to achieve the spacing to get rid of unintended white space. This has nothing to do with Embla but it’s pure CSS related.

Best, David

[davidjerleke]

@haroldao did this help?

[haroldao]

No it didn’t:/. (The codepen is up to date btw)

[davidjerleke]

@haroldao I think this fixes the problem:

Read more about the containScroll option here.

Best, David

[haroldao]

@haroldao I think this fixes the problem:

Read more about the containScroll option here.

Best,

David

Ohhh yeah .... my bad 🤦🏽‍♂️! thank you (the codepen is updated)