Monaca Onsen UI Discord Chat Github Repo

onsen carousel last item getActiveIndex



  • 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