[Help]: How can I reduce the gap between slides

[Ellathet]

Summary

Hi guys,

I'm trying to create a carousel where the width of the elements is always the same. That part is easy, but when I decrease the width below 50%, the Embla scroll just breaks.

Example with 50%:

You can see that there’s a huge gap between the slides.

Example with a fixed width of 210px:

Now the gap looks correct (almost — I can’t tweak it too much without breaking it). But when I try to scroll, it doesn’t move one by one; it scrolls through everything at once.

Any prop that I need to pass in the hook, or other thing that I need to edit in css?

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

In my original code I'm using tailwind, but I just convert to fit in codesandbox.

CodeSandbox example

https://codesandbox.io/p/sandbox/nsmkmm

[sarussss]

Hi @Ellathet
I'm pretty sure this issue comes from your incorrect css.
Since the example you provided doesn't describe the error you're having, I can't point it out for you specifically.
I think you should check the Doc again, it describes in detail how to create a gap in Embla.

https://www.embla-carousel.com/guides/
https://www.embla-carousel.com/guides/slide-gaps/
https://www.embla-carousel.com/guides/slide-sizes/

[davidjerleke]

@Ellathet, all examples in the docs include a spacing variable in the CSS. You can use the same approach to add the desired spacing between items. See the full list of examples here: https://www.embla-carousel.com/examples/predefined/.