ons-carousel-item

[OnsenUI]

Carousel item component. Used as a child of the <ons-carousel> element.

Click here to see the original article

[Jonathan Silva]

Hello, I tried this tutorial but the directionals buttons don’t work. someone can help me to fix it?

[Fran Diox]

@jonathan-silva: Make a new topic and post your code or a working demo. Otherwise it’s impossible to guess your problem.

[Jonathan Silva]

ok

[javte]

Hi there, is there any way to scroll down the carousel? I have some <code><ons-carousel-item></code> that need scroll down to see the full content. Many thanks in advanced!

[javte]

Done, I just needed to remove “fullscreen”.

[Tom]

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?