Reference > v-ons-carousel

v-ons-carousel

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.

Tutorial

A carousel is used to show several items in the same place. The user can switch between the items by panning. The VOnsCarousel component can also be controlled programatically through the activeIndex prop. An update:activeIndex event is fired whenever the user interacts with this component, allowing you to synchronize activeIndex prop. It is possible to use Vue’s v-model directive for this.

VOnsCarousel can also be nested if the carousels implement different directions.

See also

Props

Name Type Description
Number Specify the index of the carousel item that should be shown. Optional.
String If this attribute is set to "none" the transitions will not be animated. Optional.
Expression Specify the animation’s duration, timing and delay with an object literal. E.g. {duration: 0.2, delay: 1, timing: 'ease-in'}. Optional.
Boolean When this attribute is set the carousel will automatically refresh when the number of child nodes change. Optional.
Boolean If this attribute is set the carousel will be automatically scrolled to the closest item border when released. Optional.
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.
Boolean If this attribute is set 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.
String The direction of the carousel. Can be either “horizontal” or “vertical”. Default is “horizontal”. Optional.
Boolean If this attribute is set the carousel is disabled. Optional.
Boolean If this attribute is set the carousel will cover the whole screen. Optional.
Number Specify the index of the ons-carousel-item to show initially. Default is 0. If active-index is set, initial-index is ignored. Optional.
String ons-carousel-item’s height. Only works when the direction is set to “vertical”. Optional.
String ons-carousel-item’s width. Only works when the direction is set to “horizontal”. Optional.
Boolean If this attribute is set the carousel will be scrollable over the edge. It will bounce back when released. Optional.
Boolean If this attribute is set the carousel can be scrolled by drag or swipe. Optional.

Events

Name Description
postchange Fired just after the current carousel item has changed.
prechange Fired just before the current carousel item changes.
refresh Fired when the carousel has been refreshed.
overscroll Fired when the carousel has been overscrolled.
swipe Fires when the carousel swipes.
update:active-index Fired right after user interaction. Useful to update active-index prop.
postchange

Fired just after the current carousel item has changed.

Parameters
Name Type Description
event Object Event object.
event.carousel Object Carousel object.
event.activeIndex Number Current active index.
event.lastActiveIndex Number Previous active index.
prechange

Fired just before the current carousel item changes.

Parameters
Name Type Description
event Object Event object.
event.carousel Object Carousel object.
event.activeIndex Number Current active index.
event.lastActiveIndex Number Previous active index.
refresh

Fired when the carousel has been refreshed.

Parameters
Name Type Description
event Object Event object.
event.carousel Object Carousel object.
overscroll

Fired when the carousel has been overscrolled.

Parameters
Name Type Description
event Object Event object.
event.carousel Object Fired when the carousel has been refreshed.
event.activeIndex Number Current active index.
event.direction String Can be one of either “up”, “down”, “left” or “right”.
event.waitToReturn Function Takes a Promise object as an argument. The carousel will not scroll back until the promise has been resolved or rejected.
swipe

Fires when the carousel swipes.

Parameters
Name Type Description
event Object Event object.
event.index Number Current index.
event.options Object Animation options object.
update:active-index

Fired right after user interaction. Useful to update active-index prop.

Parameters
Name Type Description
event Number New value for active-index prop.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.