onsen carousel last item getActiveIndex

SushiMan

Hi,
lets assume, is have an onsen carousel with 5 ons-list-items.

Navigation and scrolling working smooth without a problem, however, on page show, all carousels are reset and return die activeIndex = 0. However, for that there is a workaround and i am able to set the initial index to the old active index, therefore, the carousel will not "reset.

However, and here is the problem, if the item-width is not 100%, so i have a carousel with item-width of 80% (to see the next item in the carousel), if i am at the last item and call

“getActiveIndex” this will return the index of the previous item, because i am not able to fully scroll to the last item.

You are able to easily reproduce the issue:

HTML:

<ons-page>
  <ons-carousel fullscreen swipeable auto-scroll item-width="80%" overscrollable id="carousel">
    <ons-carousel-item style="background-color: #085078;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        BLUE
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        DARK
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE
      </div>
    </ons-carousel-item>
  </ons-carousel>
</ons-page>

JS:

ons.ready(function() {
  var carousel = document.addEventListener('postchange', function(event) {
    alert('Changed to ' + event.activeIndex)
  });
});

The postchange will never fire for the last item, is there any workaround? Thanks in advance

gobiyau

Sorry for late reply.

It seems the postchange will not fire for last item, because it is not yet touch the end. Instead of setting carousel item width 80%, set a div 80% to contain the carousel.

<div style="width:80%">
  <ons-carousel fullscreen swipeable auto-scroll item-width="100%" overscrollable id="carousel">
    <ons-carousel-item style="background-color: #085078;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        BLUE
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        DARK
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE
      </div>
    </ons-carousel-item>
  </ons-carousel>
</div>

Best Regards
Gobi