3. Carousel wont appear

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Carousel wont appear

  • R

    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>

    0
  • R

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

    0
  • R

    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

    0
  • R

    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

    0