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 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: 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


Log in to reply