Carousel wont appear

rhubarb65

I am new to OnsenUI. I have used the example react-onsenui-redux-weather as a starting point. OnsenUI has been behaiving until I tried to use a Carousel. I basically overwrote the “content” variable with the code below in WeatherPage.js. I had to comment out a few lines because no “this” in a functional component. I get a blank screen and no error. Any ideas?

content = <Carousel
//index={this.state.index}
onPostChange={() => console.log(‘onPostChange’)}
onOverscroll={() => console.log(‘onOverscroll’)}
onRefresh={() => console.log(‘onRefresh’)}
//ref={(carousel) => { this.carousel = carousel; }}
swipeable
overscrollable
autoScroll
fullscreen
autoScrollRatio={0.2
}

<CarouselItem key={"1"} style={{ backgroundColor: 'gray' }}>
  <div className='item-label'>GRAY</div>
  <p>YO</p>
</CarouselItem>
<CarouselItem key={"2"} style={{ backgroundColor: '#085078' }}>
  <div className='item-label'>BLUE</div>
</CarouselItem>

</Carousel>

rhubarb65

I should add that

as I add Carouseltems the scrollbar on the right gets “deeper”.
I see in the debugger that element ons-carousel-item has CSS visibility: hidden; If I remove this then my content appears however the carousel-items are stacked on top of each other (see 1))

rhubarb65

I should add that the 2 points above were with no fullscreen attribute. if I add fullscreen then the scrollbar disappears but still no carousel

rhubarb65

looks like I have solved it. looks like my node_modules onsui package was screwed up. The directory still had 2.0.4 stylus based css in it. All off a sudden I was getting on build

failed to locate @import file onsenui/stylus/components.styl

So instead trying to get 2.0.4 working again, I tried to get 2.10.5 working. The fix was to replace (in index.js)

import ‘./stylus/index.styl’;

with

import 'onsenui/css/onsenui.css’
import ‘onsenui/css/onsen-css-components.css’

now I am seeing my Carousel