ons-carousel

[OnsenUI]

Carousel component.

Click here to see the original article

[munsterlander]

Setting the active index to a specific number (middle for this example) when dynamically adding carousel items

A question came up here: http://stackoverflow.com/questions/35463152/onsen-carousel-show-current-item-in-centre

A quick function to accomplish this is:

function setIndex(){
    var cnt = document.getElementById('myCarouselID').getCarouselItemCount();
    var midItem = Math.floor(cnt/2);
    document.getElementById('myCarouselID').setActiveCarouselItemIndex(midItem);
}

[Cristhian Cruz Espinoza]

I’m using a carousel with ng-repeat and its working fine most of the time, but sometimes all the carousel items stack on top of each other in a single view.

[munsterlander]

Is it possible for a carousel item to be loaded from a template? I know this doesn’t work, but is there an equivalent utilizing other elements?

<ons-carousel-item page="page2.html"></ons-carousel-item>

Edit: Credit to the Onsen team, Onsenui.js is a huge document. I thought I could jump into it and modify carousel-item to have the page attribute like splitter-content does. Yeah, so I got it added and conflicts removed, but no go. That is some serious code in there! :astonished:

[Fran Diox]

@munsterlander We will probably implement some kind of ons-include after 2.0 is released. Meanwhile you can do a trick. Put ons-navigator in your carousel item and use its page attribute :sweat_smile:

[munsterlander]

@Fran-Diox Ah! Thats what I was looking for. I knew there had to be a way to do this and I was just spacing on how. Navigator would even help me for dynamically loading. Thanks!

[munsterlander]

@Fran-Diox Is there any reason this combination would cause the postchange event to fail? Here is what I have running:

document.addEventListener('ons-carousel:init', function(ev) {
    var carousel = ev.component;
    carousel.on('postchange', function() {
      alert('yay');
    });
  });

No yay…

[Fran Diox]

@munsterlander That’s so Onsen 1. Just do:

document.addEventListener('postchange', function(ev) {
  alert('yay', ev.target);
 });

You can add the event listener to the document or to any parent component like ons-page.

[munsterlander]

@Fran-Diox Ah, its what I found in the comment and when I tried to add the listener it was failing due to me trying to add it to an object instead of the document scope. Fixed and working now! Thanks!

[theprotocol]

When item-width < 100%, it seems the first and last carousel items can’t be ‘selected’ (meaning the postchange event doesn’t fire for these elements).

As a workaround, I’m thinking along the lines of adding dummy items on each end of the carousel, and maybe detecting these edge items as an overscroll rather than a postchange (not sure if this would work, I haven’t had time to test this yet), and handle that event in order to automatically re-select the nearest non-dummy item.

Are there any known workarounds?

edit: My workaround idea doesn’t work right. The carousel kind of settles on the first or last list element, as if it was selected, without it actually being selected in terms of activeIndex/postchange, nor is overscroll triggered unless the user goes out of his/her way to do it.