React Reference > Carousel Component

<Carousel />

Carousel component. A carousel can be used to display several items in the same space. The component supports displaying content both horizontally and vertically. The user can scroll through the items by dragging and it can also be controller programmatically.

Usage 

<Carousel
          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 style={{backgroundColor: 'gray'}}>
            <div className='item-label'>GRAY</div>
          </CarouselItem>
          <CarouselItem style={{backgroundColor: '#085078'}}>
            <div className='item-label'>BLUE</div>
          </CarouselItem>
        </Carousel>

Props

[improve this]
Name Type Description
direction enum The direction of the carousel. Can be either “horizontal” or “vertical”. Default is “horizontal”. Optional.
fullscreen bool If true, the carousel will cover the whole screen. Optional.
overscrollable bool If true, the carousel will be scrollable over the edge. It will bounce back when released. Optional.
centered bool If true, the carousel then the selected item will be in the center of the carousel instead of the beginning. Useful only when the items are smaller than the carousel. Optional.
itemWidth string ons-carousel-item’s width. Only works when the direction is set to “horizontal”. Can be in pixels or a percentage. Optional.
itemHeight string ons-carousel-item’s height. Only works when the direction is set to “vertical”. Can be in pixels or a percentage. Optional.
autoScroll bool If true, the carousel will be automatically scrolled to the closest item border when released. Optional.
autoScrollRatio number A number between 0.0 and 1.0 that specifies how much the user must drag the carousel in order for it to auto scroll to the next item. Optional.
swipeable bool If true, the carousel can be scrolled by drag or swipe. Optional.
disabled bool If true, the carousel will be disabled. Optional.
activeIndex number Specify the index of the ons-carousel-item to show. Default is 0. Optional.
index number DEPRECATED! Use activeIndex instead. Optional.
autoRefresh bool When this attribute is set the carousel will automatically refresh when the number of child nodes change. Optional.
onPreChange func Called just before the current carousel item changes. Optional.
onPostChange func Called just after the current carousel item has changed. Optional.
onRefresh func Called when the carousel has been refreshed. Optional.
onOverscroll func Called when the carousel has been overscrolled. Optional.
animation string If this prop is set to “none” the transitions will not be animated. Optional.
animationOptions object Specify the animation’s duration, delay and timing. E.g. {duration: 0.2, delay: 0.4, timing: 'ease-in'}. Optional.
onSwipe func Hook called whenever the user slides the carousel. It gets a decimal index and an animationOptions object as arguments. Optional.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.