Embla-carousel: Usage with (grid) gap spacing

[rkumorek]

Hey,

Thank you for such a delightful library!

Would you consider adding support for creating spacing using grid-gap or gap properties?
Currently I'm using padding and margin like in the examples which works just fine for my use cases but having support for gap would make it even easier.

Current issue when using gap is that the spacing seems to not be calculated into the transform so the last slide is 'cut off' as the scroll is calculated if it was with no spacing between slides.

// Current
.embla__container {
  display: flex;
  margin-left: -20px;
}
.embla__slide {
  position: relative;
  min-width: 80%;
  padding-left: 20px;
}

// Alternate
.embla__container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 50%;
  gap: 20px; 
}
.embla__slide {
  position: relative;
}

  // or

.embla__container {
  display: flex;
  gap: 20px;
}
.embla__slide {
    position: relative;
    width: 50%;
  }

Now as I posted it I can see that using margin and padding it is the same or less lines of code but it doesnt feel as clean as just putting gap: 20px;

Also forgive me as I haven't really looked into the source code to see if and how could it be implemented.
I would like you know your opinion on this.

Thanks,
Raf

[davidcetinkaya]

Hi Raf (@rkumorek),

Thank you for your question. I agree that this feature would be a great addition to the library.

The good news
I have this on my roadmap and I will use an approach that will take both grid spacing and margins into account automatically. If I find a way to achieve this without increasing the bundle size too much, It will be more convenient for users to add spacing with this feature.

The not so good news
I can't give an ETA of when this will be added to the Embla Carousel core.

I hope you understand.

Best,
David

[davidcetinkaya]

Hi Ref (@rkumorek),

After investigating this a bit, I realized that detecting slide spacings automatically will probably increase bundle size significantly. This is because of all the cases there are to cover like:

• Margins (left, right for horizontal carousels and top, bottom for vertical).
• Grid gaps.
• Anything else that will offset a slide like transform: translate().

Do you have any suggestions about how to proceed with this?

Best,
David

[rkumorek]

Hey,

Thanks for looking into it in more detail. Sounds like that would be way bigger job than I thought (haven't counted all the cases that you pointed 🙈).

As we stand I can't provide any real solution/suggestion but I will definitely have a try at it if I can think of something myself.

Thanks again,
Raf

[davidcetinkaya]

Hi again Raf (@rkumorek),

Are you using the VanillaJS or ReactJS version of Embla Carousel? Because I realized that implementing this:

I will use an approach that will take both grid spacing and margins into account automatically

...without increasing the bundle size much was actually much easier than I initially thought. I have a working draft I would like to share with you so you can test it out. Maybe we can find and solve some potential bugs before releasing this feature.

Best,
David

[rkumorek]

Hey (@davidcetinkaya),

I'm using vanilla js one at the moment,

[davidcetinkaya]

Thanks Raf (@rkumorek), I’ll create a CodeSandbox for you and I’ll let you know when it’s ready.

[davidcetinkaya]

Hi Raf (@rkumorek),

Here is a CodeSandbox:

• Vanilla JavaScript

Fork it and try setting up your own carousel with CSS grid and grid gaps. You can also try adding margin between the slides. Embla Carousel should pick it all up and adjust the scroll snaps automagically. Let me know how it goes.

Best,
David

[rkumorek]

@davidcetinkaya

Thank you for this.

This is a basic example: https://codesandbox.io/s/embla-carousel-vanilla-github-issue-148-forked-zht4h
And it seems to work great with either grid or flex gap's.

Sadly I cannot remember my code from back when I originaly tried that but this is close if not exactly what I wanted.

[davidcetinkaya]

Thanks for testing it out Raf (@rkumorek) 👍. I'm glad to hear that it works.

I've just published Embla Carousel v4.2.0 that comes with this feature. You can read more about it in the release details. Make sure to install the latest version of Embla to make use of this.

Enjoy!
David