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