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.
A carousel is used to show several items in the same place. The user can switch between the items by panning. The carousel can also be controlled programatically.
The current carousel index can be controlled using the
index prop and you can listen to changes with the
onPostChange prop which will be called efter the index has changed.
|Name||Type Default Value||Description|
|direction||string||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||number||ons-carousel-item’s width. Only works when the direction is set to “horizontal”. Optional.|
|itemHeight||number||ons-carousel-item’s height. Only works when the direction is set to “vertical”. 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.|
|index||number||Specify the index of the ons-carousel-item to show. Default is 0. Optional.|
|autoRefresh||bool||When this attribute is set the carousel will automatically refresh when the number of child nodes change. Optional.|
|onPostChange||function||Called just after the current carousel item has changed. Optional.|
|onRefresh||function||Called when the carousel has been refreshed. Optional.|
|onOverscroll||function||Called when the carousel has been overscrolled. Optional.|
Specify the animation’s duration, delay and timing. E.g.
|onSwipe||function||Hook called whenever the user slides the carousel. It gets a decimal index and an animationOptions object as arguments. Optional.|
For bug reports and feature requests use our GitHub Issues page.