Monaca Onsen UI Discord Chat Github Repo

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: