Non-visible slides when using CSS grid in combination with `loop: true`

Bug is related to

• embla-carousel (core package)

Embla Carousel version

• v6.2.0

Describe the bug

When CSS grid (as described here) is used in combination with loop: true, the left offset of the last or first slide is not properly calculated and it leads to not showing the first/last card inside the carousel.

The calculation here is correct for flex-box: https://github.com/davidjerleke/embla-carousel/blob/master/packages/embla-carousel/src/components/SlideLooper.ts#L49-L63

But when display: grid is used for the embla__container the value left needs to be set relative to each slide/card instead of the container width (+ gaps).

CodeSandbox

https://codesandbox.io/s/embla-carousel-loop-vanilla-forked-4b75xf?file=/package.json

Or as standalone example: https://4b75xf.csb.app/

Steps to reproduce

1. Open https://4b75xf.csb.app/ (Carousel with loop: true and CSS Grid)
2. Last card is shown on the left
3. Click on previous button
4. Now the first card is not shown on the right

Expected behavior

That the last / first card is shown when looped using CSS grid.

Additional context

Initial Load: missing last card

Clicking on previous button: first card is not shown

[davidjerleke]

@klipstein I’m working on Embla v7 now and this bug will be solved there:

• #298

[klipstein]

@davidjerleke works great! The only small issue I’ve seen in my quick test was, that an applied grid gap (CSS gap: 10px) was not set between last slide and first slide when loop was used. But this can be fixed easily with a margin.