Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Showing the last item of a Carousel (React)

  • Hello,

    It is programmatically possible to change the current item of a carousel with the index property. However, this does not work for me on the first rendering. In the example below, the first item (instead of the third) is shown:

    class Welcome extends React.Component {
         this.state = {
      render() {
                  <Carousel index={this.state.carouselItemIndex}>
                         <CarouselItem>Item 1</CarouselItem>
                         <CarouselItem>Item 2</CarouselItem>
                         <CarouselItem>Item 3</CarouselItem>

    Changing the index programmatically (for example, with a timer) works.
    How can I display the last CarouselItem when displaying it for the first time?

  • @Daniel-Beck I am not knowledgeable with React; however, in the docs here if you change index to 2 in the function getInitialState it works as you would expect. Maybe this can provide you some pointers for implementing within your own code. Apologies for not having a greater knowledge of React to be able to give you specifics.

  • @munsterlander : Thanks for the response. The example in the docs (your link) works. I researched a little bit and found out that the false CarousselItem is shown when the caroussel is used inside a tabbar.

    Here is an example with a tabbar. I doesn’t work as expected:

    Here is an example without tabbar (works as expected):

    I opened an issue for this: