Embla-carousel: `loop` doesn't work when displaying three slides out of four total slides

[patrickhuang94]

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

[davidcetinkaya]

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

[patrickhuang94]

Great, thanks for the quick response and explanation! Cheers.

[davidcetinkaya]

Hi again Patrick (@patrickhuang94),

If you want to perform a check to know if slide content is enough to loop or not, there's an unofficial way of doing this. Just in case you want to duplicate slides based on the boolean it returns.

const notEnoughToLoop = !embla.dangerouslyGetEngine().slideLooper.canLoop()

if (notEnoughToLoop) {
  // Duplicate your slides
  embla.reInit(); // Re-init embla to pick up all the slides including the duplicated ones
}

I hope it helps.

Best,
David

[patrickhuang94]

Another solution that I just thought of, instead of duplicating slides:

Currently my code looks like this

<div className="embla__container">
    {children.map((slide, index) => (
        <div
            key={index}
            className="embla__slide"
            style={{
                minWidth: `${100 / slidesToShow}%`,
            }}
        >
            <div className="embla__slide__inner">{slide}</div>
        </div>
    ))}
</div>

which, whenever slidesToShow = 3, will resolve to 33.33 * 3 = 99.99% (and thus never hit the required 100%). I can probably add some custom logic that rounds the min width to 33.34% whenever we receive a slidesToShow input of 3.

Something like

const slideWidth = slidesToShow === 3 ? '33.34%' : `${100 / slidesToShow}%`
...
<div style={{ minWidth: slideWidth }}>...</div>

[davidcetinkaya]

Hi Patrick (@patrickhuang94),

Of course! You can solve this in different ways. But I guess the bottom line is that the library won’t do it for you, if you’re looking to make your carousel loop even if the slide content isn’t enough 🙂. As I mentioned you can use the unofficial hint I demonstrated in this comment.

Did you solve it for your use case?

Kindly,
David

[davidcetinkaya]

@patrickhuang94 I'm closing this issue if you don’t have any objections?

[davidcetinkaya]

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

Best,
David