3. Carousel with infinite scroll

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.

Carousel with infinite scroll

  • M

    Hi,
    I’m new to onsen ui and i’m trying to do a compound of ons-carousel and ons-lazy-repeat to make a lazy loaded carousel but it’s not working properly. Looks like the ons-lazy-repeat only designed to be used with normal lists.

    My question is: Is it possible at all? Or is there any workaround to make this possible?

    I want to have thousands of pages in carousel and load them dynamically when user is paging. (for performance and resource efficiency)

    0 1 Reply
  • Onsen UI

    @mohsen Hey! Sorry for the late reply. I don’t think this is possible at all with the current carousel and lazy-repeat, they were not made to work in that way :confused:

    0
    P
     1 Reply

  • @mohsen As @Fran-Diox mentioned it’s impossible to use the two components together. You could try to implement something similar to our ons-lazy-repeat yourself, however depending on your requirements it may not be trivial.

    Here’s a basic Demo of what could be done.

    However you can see that a simple implementation can result in a lot of limitations and it may not feel very good. This one works correctly if you only click the two buttons, without swiping or transitions.

    To make it work better you would need some more complex code. :(

    0
  • M

    Thank you both for clear answers.
    Actually based on my requirements I’ve found it possible using an AngularJS component (https://github.com/revolunet/angular-carousel) which has a nice “rn-carousel-buffered” option. However it’s not a real lazy load since data must be loaded into a variable first but when it comes to display, its buffered loading will limit ng-repeat to only create 5 elements regardless of how many elements you have in your array (thousands maybe).

    0
  • P

    @Fran-Diox I tried doing it and got it working with a glitch on scrolling enabled that messes it all .Here is the code

      <ons-carousel fullscreen swipeable auto-scroll overscrollable id="carousel" direction="vertical" style="overflow: hidden;">

    <ons-lazy-repeat id="infinite-list" style="overflow: hidden;">
    </ons-lazy-repeat>
  </ons-carousel>

    and the JS

      var infiniteList = document.getElementById('infinite-list');

  infiniteList.delegate = {
    createItemContent: function(i) {
      console.log('Current item is ' + event.activeIndex);
      return ons._util.createElement(
        '<ons-carousel-item style="background-color: #085078;">Item ' + i + ' </ons-carousel-item>'
      );
    },
    countItems: function() {
      return 10000;
    }

  };
  infiniteList.refresh();}

    Is there any way to get infinite scroll on carousel ? appending is not working on it.

    0