I seem to have an issue with the methode: setActiveIndex(). It only seems to effective when a page is actually loaded and shown.
My page is built in a way as shown below and I want the carousel to dynamically move to a specific item
during the init of the page, based on a provided parameter.
<ons-carousel swipeable auto-scroll overscrollable id=“carousel”>
<ons-carousel-item>
item A
</ons-carousel-item>
<ons-carousel-item>
item B
</ons-carousel-item>
<ons-carousel-item>
item C
</ons-carousel-item>
</ons-carousel>
To achieve this I use something like the code below during the page init event:
var myCarousel = document.querySelector('#carousel');
myCarousel.setActiveIndex(1);
- (zero based array)
Testing the value with getActiveIndex() shows that setting the index worked, but when the page is shown always the first carousel item is show. regardless of the set value.
When I apply the same code in the ‘show’ event it works, just like with a button click event on the page. Can be due to the fact the items are not added to the DOM yet at init phase? Well I could live with that, but the jump to the set item is noticeable and that is really not great.
What do I do wrong and would be a solution for this?
