make carousel infinite swipe

[Gaurav]

@Fran-Diox how to make carousel infinite swipe ??
I have used gesture detector to do this but it is too sensitive when I swipe to last carousel it goes to 2nd carousel not first here is my codepen

[munsterlander]

@Gaurav How about instead of using a gesture detector, just use the postchange event, read the item count and if on the last one, reload the item array? I think that should work in theory.

[Songkeys]

I wrote this with simply using append and cloneNode() method, which is definitely not a good implementing. The refresh() made it splash when swiping, and swipe right doesn’t work well because the children index will change if trying to use insertBefore() method.
Based on the ons-carousel index not able to tell what happened to dynamic children items, I think this really hard to do so unless change the core of it.
Or does anyone has a better idea?

[Fran Diox]

There is no “infinite” option in ons-carousel since it is a simple slider that uses translate3d CSS. I think other frameworks are bundling a full featured carousel project like Slick or Swiper. If you need extra features you can also include any of those tools.

[Gaurav]

thank you guys for all research

[Gaurav]

@munsterlander I have tried postchange event but this event doesn’t fired when I am to last carousel

[Gaurav]

@Fran-Diox But how to include slick in ons-carousel since I have ons-carousel in lot of pages??

[Fran Diox]

@Gaurav It’s not about including slick in ons-carousel, it’s about using slick instead of ons-carousel whenever you need extra functionalities :sweat_smile:

[munsterlander]

@Gaurav So, you wouldn’t want to read the event on the last slide, you want postchange on the next to last slide, this way you can reload everything prior to the end for a more seamless user experience. But, as @Fran-Diox has already stated, this may be not possible as it was just a theoretical stab in the dark. I still think it would work though with some JS, you might have to dynamically append the slides, but you should be able to inject them.

[Fran Diox]

@Gaurav I just found a codepen I made a while ago using slick.js.

@munsterlander It’s a bit tricky because it’s not just appending new element, but calculating their CSS properties.

[Gaurav]

thank fran this will help me a lot:grinning:

[munsterlander]

@Fran-Diox Ah, ok. That would make sense, so you would have to refresh everything which would cause some flickering.