3. onsen carousel last item getActiveIndex

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.

onsen carousel last item getActiveIndex

  • S

    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

    0
  • G

    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

    0