Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
make carousel infinite swipe
@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
@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 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.
@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.
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.