[Feat]: Repeat items if necessary to achieve infinite scroll

[openscript]

Hello everybody

Based on #114 I could implement a continuously running slider. When the slider is too wide or there are not enough items, to fill the whole width the slider becomes buggy.

I've created a Sandbox here. Here is a little clip about, which shows the problem:

If I fill the whole visible width with items it works fine. Would it be easy to implement a feature within embla, which at least fills the visible width? .. because even if it isn't buggy, I want to fill the whole width for a nice appearance.

Thank you in advance!

[davidjerleke]

Hello Robin (@openscript),

Thank you for your feature request. At the moment, Embla has a built-in functionality that falls back to loop: false if the slide content isn't sufficient to create the loop effect. I don't think cloning and start messing with HTML is a good solution in order to make the loop functionality work, when there's not enough slides to cover the loop gap. I've chosen this approach instead of cloning items because cloning items can cause a lot of problems and bugs in certain cases - Like event listeners and other stuff that cannot be cloned.

I guess when setting up the ticker you requested (in issue #114), I re-created the internal carousel loop so it doesn't respect the fallback. So you'll have to add clones yourself. You can do this by checking if there are enough slides to loop like so:

emblaApi.internalEngine().slideLooper.canLoop() // returns --> boolean

...or maybe not scroll at all if there aren't enough to items to loop? Because users will see duplicates and I'm not sure that makes sense?

I hope this helps.

Kindly,
David

[openscript]

Hello David

Thank you so much for the quick response.

That's a great hint with canLoop(). Also your point about not too loop, when there aren't enough items is very valid.

After all, when I want to fill up the empty space with items, I need to know how wide all items are as well as the whole slider. With the possibility that the user resized the window it becomes quite complicated.

I understand now, that this is tricky to implement within embla. I think I won't scroll if there aren't enough items as you suggested.

Thank you again! :)

Robin

[davidjerleke]

Hi Robin (@openscript),

Thanks a lot for understanding!

Kindly,
David