ons-carousel-item

[OnsenUI]

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

Click here to see the original article

[davidfherrerar]

Hello, I am currently using OnsenUI2 with AngularJS, I was trying to use the ons-carousel, with an ons-carousel-item in an ng-repeat. Although the first ons-carousel-item shows up the following ones do not display anything. Here is the code:

 <ons-carousel var="carousel" ons-postchange="console.log('Changed to ' + $event.activeIndex)" fullscreen swipeable auto-scroll overscrollable >
    <ons-carousel-item style="background-color: #085078;"  ng-repeat="i in [{'id':1},{'id':2},{'id':3}]">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;" >
        BLUE {{i.id}}
      </div>
    </ons-carousel-item>
</ons-carousel>

[Fran Diox]

@davidfherrerar Do you mean like this example?

[davidfherrerar]

@fran-diox: Hey Fran, yes I do realize it works there, let me elaborate, I modified the tutorial and it worked. I then tried it in my own project and it did not work for some reason it was not working for me in my project. I inspected the element and although it was there, it was not showing on the screen. I proceeded to create a new monaca project via, monaca create, and I try it there. It also did not work. Maybe there is something wrong with the current version from bower?

[davidfherrerar]

I just did the experiment, clean project start, monaca create, then went into index.html, copied and pasted your code from the codepen. Again, it shows the first slide but the two following are blank, even though they show when you inspect the element.

[Fran Diox]

@davidfherrerar Yes, looks like the included version in the normal JS or AngularJS templates is 2.0.0-rc.1. Please try to update it manually to 2.0.3.
I’ll try to modify the templates and allow using NPM to get the latest version when I have some time. Thanks for reporting!