A carousel is a UI component that is used to display several items in the same place. Switching between the content can either be automatic or controlled by the user.
In Onsen UI a carousel is created using the
<ons-carousel> <ons-carousel-item> ... </ons-carousel-item> <ons-carousel-item> ... </ons-carousel-item> ... </ons-carousel>
<ons-carousel> element has a large number of attributes that control its behavior.
By default the carousel can not be controlled by swiping. The
swipeable attribute will enabled this.
To make it automatically snap to item borders the
auto-scroll attribute is used. The
overscrollable attribute makes it possible to scroll past the first and last element of the carousel.
To make it cover the whole screen you can use the
The carousel goes from left to right by default. It is possible to make scroll vertically by using the
<ons-carousel direction="vertical"> ... </ons-carousel>
You can try adding the
direction="vertical" attribute to this example to see how it works.
The carousel can also be controlled programmatically. To switch to the previous or next item the
next() are used.
To switch to a specific item the
setActiveIndex(index) method is used.
The carousel element emits DOM event. Every time the current item has changed it emits the
postchange event which is useful to make sure which is the currently displayed item.
In AngularJS this event can be handled in
<ons-carousel ons-postchange="console.log('Changed to ' + $event.activeIndex)"></ons-carousel>