Onsen UI 2 carousel does not reset position after swiping



  • 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


  • 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.



  • This post is deleted!


  • @misterjunio Thanks for replying

    setActiveIndex worked for me.


Log in to reply