Carousel in version 2.0.0-rc.7 or later

[Moguchan]

Attribute of Carousel named “initial-index” is not working with version 2.0.0-rc.7 or later.
Method “setActiveIndex()” too.

[munsterlander]

@Moguchan I just tested in rc 9 and the below code works. initial-index functions, but for everything else, it changed a bit to setActiveCarouselItemIndex

<ons-carousel id="crsl" style="height: 400px; width: 400px" initial-index="1" swipeable overscrollable auto-scroll>
  <ons-carousel-item>
     Carousel Item 1
  </ons-carousel-item>
  <ons-carousel-item>
     Carousel Item 2
     <ons-button onclick="document.getElementById('crsl').setActiveCarouselItemIndex(0);">Click to Change</ons-button>
  </ons-carousel-item>
</ons-carousel>

[Moguchan]

Yes, it works fine.
However, it does not work in rc15 when the same description in the template which specified in the page attribute of the Navigator. In rc6, it works even in this case.
setActiveIndex worked, sorry.

<ons-navigator id="myNavigator" page="page.html"></ons-navigator>

<ons-template id="page.html">
  <ons-carousel id="crsl" style="height: 400px; width: 400px" initial-index="1" swipeable overscrollable auto-scroll>
    <ons-carousel-item>
       Carousel Item 1
       <ons-button onclick="document.getElementById('crsl').setActiveIndex(1);">Click to Change</ons-button>
    </ons-carousel-item>
    <ons-carousel-item>
       Carousel Item 2
       <ons-button onclick="document.getElementById('crsl').setActiveIndex(0);">Click to Change</ons-button>
    </ons-carousel-item>
  </ons-carousel>
</ons-template>

[Fran Diox]

@Moguchan Thanks for reporting. I guess you are not using Angular1, right?

[Fran Diox]

@Moguchan OK, I’ve been able to reproduce this. The problem is when the carousel is inside ons-navigator due to some asynchronous loading, and looks like this happens since rc.11. We’ll investigate this :)

[Moguchan]

@Fran-Diox Yes, I’m using Onsen UI with Angular 1.

[Fran Diox]

@Moguchan I found them problem, it’s actually in the core so Angular1 has nothing to do. The problem is this line. Using visibility: hidden instead of display: none would fix it but I don’t have time right now to test it in devices. I’ll fix it when I have some free time :)

[Moguchan]

@Fran-Diox Thank you very much. :satisfied:

[Fran Diox]

@Moguchan This will be fixed in gh#1507 :)

frandiox created this issue in OnsenUI/OnsenUI

closed fix(ons-navigator): Fixed display conflicts with ons-carousel. #1507