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
    onPostChange={() => console.log(‘onPostChange’)}
    onOverscroll={() => console.log(‘onOverscroll’)}
    onRefresh={() => console.log(‘onRefresh’)}
    //ref={(carousel) => { this.carousel = carousel; }}

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


  • 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’;


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

    now I am seeing my Carousel