`loop` doesn't work when displaying three slides out of four total slides

Hi,

When the total number of slides is set to 4, slidesToShow: 3, and slidesToScroll: 1, the loop option stops working. This was mentioned in the docs, which is probably what’s happening

loop
... Automatically falls back to false if slide content isn't enough to loop.

This can be reproduced in the sandbox: https://codesandbox.io/s/embla-carousel-loop-react-forked-7200i?file=/src/js/index.js

Two questions:

1. What’s the reasoning for this restriction? There’s definitely enough slide content to loop. I was expecting to see [1,2,3] on initial render, [2,3,4] on next click, and [3,4,1] on next click.
2. Is there a workaround for this?

Thanks, Patrick

[davidjerleke]

Hello Patrick (@patrickhuang94),

Thank you for your question and the CodeSandbox. The documentation is correct, Embla Carousel will check if there is enough slide content to make the loop effect work without any flickering (white space showing).

1. What’s the reasoning for this restriction? There’s definitely enough slide content to loop. I was expecting to see [1,2,3] on initial render, [2,3,4] on next click, and [3,4,1] on next click.

Now, assuming you have 4 slides, you would think that setting the CSS like this:

.embla__slide {
  min-width: 33.33333%;
}

/* ...or a nicer way to put it */

.embla__slide {
  min-width: calc(100% / 3);
}

…would result in enough content to make the loop effect work. But this isn’t the case. Because the viewport is 100%. And the slide content for 3 slides (we subtract 1 slide because it’s needed to flip around for the loop effect to work) will be 33.33333 * 3 = 99.99999%. Additionally, when I log the slide sizes calculated from the boundingClientRect, the browser gives 33.331691216316074, which isn’t even 33.33333%.

I hope this explanation makes sense.

1. Is there a workaround for this?

There’s no workaround for this other than writing your own fallback logic. For example, you can duplicate the slides yourself.

Best, David

[davidjerleke]

@patrickhuang94 I’m closing this as resolved. You’re welcome to open this issue again if you don’t agree.

Best, David