Carousel wont appear
-
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>
-
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))
-
-
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
-
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