Monaca Onsen UI Discord Chat Github Repo

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

    1. as I add Carouseltems the scrollbar on the right gets “deeper”.

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