Showing the last item of a Carousel (React)

Daniel Beck

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 {

  constructor(){
     this.state = {
        carouselItemIndex:2
     };
  }

  render() {
    return 
              <Carousel index={this.state.carouselItemIndex}>
                     <CarouselItem>Item 1</CarouselItem>
                     <CarouselItem>Item 2</CarouselItem>
                     <CarouselItem>Item 3</CarouselItem>
              </Carousel>;
  }
}

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

munsterlander

@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.

Daniel Beck

@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: https://codepen.io/anon/pen/vypwJo?&editors=101

Here is an example without tabbar (works as expected): https://codepen.io/anon/pen/rWpgGv?&editors=101

I opened an issue for this: https://github.com/OnsenUI/react-onsenui/issues/189