Carousel

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> element.

<ons-carousel>
  <ons-carousel-item>
    ...
  </ons-carousel-item>
  <ons-carousel-item>
    ...
  </ons-carousel-item>
  ...
</ons-carousel>

Customization

The <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 fullscreen attribute.

Changing the direction

The carousel goes from left to right by default. It is possible to make scroll vertically by using the direction attribute.

<ons-carousel direction="vertical">
  ...
</ons-carousel>

You can try adding the direction="vertical" attribute to this example to see how it works.

Methods

The carousel can also be controlled programmatically. To switch to the previous or next item the prev() and next() are used.

To switch to a specific item the setActiveIndex(index) method is used.

Events

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-postchange attribute:

<ons-carousel ons-postchange="console.log('Changed to ' + $event.activeIndex)"></ons-carousel>