Usage with (grid) gap spacing

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

[rkumorek]

@davidjerleke

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.

[davidjerleke]

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