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. If the carousel is not fullscreen you may need to specify the height or the width of the items through CSS.

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.

Compilation

<ons-carousel> element slightly modifies its content to make it swipeable by adding div.ons-swiper-target wrapper. The final results look like this:

<ons-carousel>
  <div class="ons-swiper-target">
    <ons-carousel-item></ons-carousel-item>
    <ons-carousel-item></ons-carousel-item>
    <ons-carousel-item></ons-carousel-item>
  </div>
</ons-carousel>

This wrapper can also be manually provided.