Looping Embla Carousel inside a container without overflow-hidden

[tobimori]

I created a minimum reproducible example here: https://codepen.io/tobimori/pen/rNoddvj

Many designs are grid-based and have a container, and the contents of a slider are meant to be aligned to the container. When now using Embla's loop mode, embla uses the container measurements to decide whether to move items or not. This results in the loop being buggy/flickering. It works fine when not having the container, but then the alignment is off or you can't use a grid anymore.

It'd be great if we can supply a different container for looping measurements (in this case it would be body etc. instead). Or am I missing something and Embla already solves this?

The example above works just fine when removing the container class, but then the alignment is "off". Especially for grid based designs, where it's not possible to work around.

[davidjerleke]

Hi @tobimori,

Thank you for your question.

When now using Embla's loop mode, embla uses the container measurements to decide whether to move items or not. This results in the loop being buggy/flickering. It works fine when not having the container, but then the alignment is off or you can't use a grid anymore.

I think the docs make it quite clear that the overflow wrapper isn't optional? So I'm not following the logic that Embla is buggy/flickering because you exclude markup that's necessary for the carousel to work. When looping the carousel, Embla somehow has to hide when slides shift position in order to create the loop effect.

Align is working just fine, but you'll have to align with the align option and not with CSS.

It'd be great if we can supply a different container for looping measurements (in this case it would be body etc. instead). Or am I missing something and Embla already solves this?

You can set your container and viewport to any size you want building upon this guide. However, you also need enough slides inside that container to loop and create the loop effect. Otherwise, ss the docs say:

Embla automatically falls back to false if slide content isn't enough to create the loop effect without visible glitches.

Best,
David

[tobimori]

Let me try to explain it differently.
I want to use the following HTML structure:

<div class="body"> -> this has `overflow: hidden`, but is `width: 100%`
  <div class="embla container"> -> this is my embla node & centered container with max-width
    <div class="wrapper"> -> this is my slide container
      <div class="slide"></div>
    </div>
  </div>
</div>

However the loop mode only moves slides outside of the size-limiting container, so it looks buggy. I want Embla to use the parent element of that (the .body element) to determine whether to move slides.

It's a pretty common use case for me to have a structure like this and I implemented this on almost all sites I've worked with Embla so far.

[davidjerleke]

@tobimori we could replace the number option with a callback function like so:

const options = {
  align: (viewSize, snapSize, index) => {
    // create your own alignment
    return yourCustomAlignment
  }
}

The benefit of this would be that you would have direct access to the size of the container (viewSize) and the current slide/slideGroup (itemSize) which is convenient because you don't have to read element dimensions yourself. Note that the function would run for each and every scroll snap. This would be even more flexible than the previous implementation and wouldn't affect bundle size.

Let me know if it's of interest.

Best,
David

[davidjerleke]

@tobimori closing this if you're not interested in this.

[tobimori]

Sorry, I forgot to respond, but this would be extremely helpful! 😍

[davidjerleke]

• Issue created from this discussion Replace option align:number with a callback #594.

[davidjerleke]

@tobimori I've released this feature in v8.0.0-rc15.