make carousel infinite swipe
Songkeys last edited by
I wrote this with simply using
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
Based on the
ons-carouselindex 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?
There is no “infinite” option in
ons-carouselsince it is a simple slider that uses
translate3dCSS. 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.
thank you guys for all research
@munsterlander I have tried postchange event but this event doesn’t fired when I am to last carousel
@Fran-Diox But how to include slick in ons-carousel since I have ons-carousel in lot of pages??
@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:
@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.
@munsterlander It’s a bit tricky because it’s not just appending new element, but calculating their CSS properties.
thank fran this will help me a lot:grinning:
@Fran-Diox Ah, ok. That would make sense, so you would have to refresh everything which would cause some flickering.