3. Onsen UI 2 carousel does not reset position after swiping

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 UI 2 carousel does not reset position after swiping

  • V

    I am using Onsen UI 2 in an android app using cordova. I am using JavaScript Core carousel for displaying html content in slides.

    When I scroll down in one slide and go to the next slide by swipe(horizontal swipe) then the next slide also opens at scrolled down position. The next slide does not open from top(0,0)

    I want to display the next slide from 0,0 after swiping.

    Please have a look, how slide navigation is working: https://www.youtube.com/watch?v=tVkZ6OyPrU8

    0 1 Reply
  • Onsen UI

    @viveklc When you structure your pages in slides you may want to try the fullscreen attribute which seems you’re not using. You can also add vertical navigation by nesting carousels, such as in this example:

    <ons-carousel swipeable overscrollable auto-scroll fullscreen auto-scroll-ratio="0.2">
  <ons-carousel-item>
    <ons-carousel direction="vertical" swipeable overscrollable auto-scroll fullscreen auto-scroll-ratio="0.2">
      <ons-carousel-item style="background-color: gray;">
        <div class="item-label">GRAY</div>
      </ons-carousel-item>
      <ons-carousel-item style="background-color: #085078;">
        <div class="item-label">BLUE</div>
      </ons-carousel-item>
    </ons-carousel>
  </ons-carousel-item>
  <ons-carousel-item style="background-color: #373B44;">
    <div class="item-label">DARK</div>
  </ons-carousel-item>
  <ons-carousel-item style="background-color: #D38312;">
    <div class="item-label">ORANGE</div>
  </ons-carousel-item>
</ons-carousel>

    Otherwise you can try carousel's methods such as setActiveIndex(index, [options]). Hope it helps.

    0
    V
     1 Reply
  • V

    This post is deleted!
    0
  • V

    @misterjunio Thanks for replying

    setActiveIndex worked for me.

    0