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 { 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?
-
@Daniel-Beck I am not knowledgeable with React; however, in the docs here if you change
index
to 2 in the functiongetInitialState
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: 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