Gap after last slide when having containScroll: 'trimSnaps' enabled

[SunpieAgency]

Bug is related to

• [x] embla-carousel (core package)

Embla Carousel version

• v7.0.9

Describe the bug

I'm facing a problem with the gap (margin-right) after the last slide which is now visible when having containScroll: 'trimSnaps' enabled. This issue seems to appear since version 7.0.

You can switch between newer Versions and V6.2.0 in my CodeSandbox to see the difference.

I'm aware of the fact that I could handle it with some CSS (:last-child: margin: 0, ...). But i'm wondering if this is a bug since older versions do the job and the documentation states that Embla "will conveniently pick up any spacings between the slides and automatically adjust the scroll snaps accordingly.".

CodeSandbox

https://codesandbox.io/s/embla-carousel-default-vanilla-forked-qgdw54

[davidjerleke]

Hi @SunpieAgency,

This has been requested by devs using this package. It was released with v7.0.0.

Feature specification:

• 331

So this is not a bug.

Best, David

[SunpieAgency]

Hi @davidjerleke,

thank you for your quick response. Would you recommend solving it via. CSS like your examples do? Like:

.embla__container { margin-left: calc(var(--slide-spacing) * -1); }

.embla__slide { padding-left: var(--slide-spacing); }

Anyway, thank you for this awesome library :)

[davidjerleke]

@SunpieAgency in most cases yes, because it will work without modifying your CSS in many cases, for example when changing the slidesToScroll option. The only downside with this approach is that you need an inner <div> inside your slides in cases where the slide content isn't an image:

<div className="embla__slide">
  <div className="embla__slide__inner">
    Slide content here
  </div>
</div>

Cheers, David