v-ons-carousel

実例

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 index prop. An update:index event is fired whenever the user interacts with this component, allowing to synchronize index prop. It is possible to use Vue’s sync modifier for this.

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

関連情報

名前 型 / デフォルト値 概要
Number Specify the index of the carousel item that should be shown. (翻訳中) Optional.
Boolean この属性がある時、子要素の数が変わるとカルーセルは自動的に更新されるようになります。 Optional.
Boolean この属性がある時、一番近いcarousel-itemの境界まで自動的にスクロールするようになります。 Optional.
Number 0.0から1.0までの値を指定します。カルーセルの要素をどれぐらいの割合までドラッグすると次の要素に自動的にスクロールするかを指定します。 Optional.
Boolean この属性がある時、選んでいるons-carousel-itemはカルーセルの真ん中へ行きます。項目がカルーセルよりも小さい場合にのみ、これは便利です。 Optional.
String カルーセルの方向を指定します。”horizontal”か”vertical”を指定できます。”horizontal”がデフォルト値です。 Optional.
Boolean この属性がある時、dragやtouchやswipeを受け付けなくなります。 Optional.
Boolean この属性があると、absoluteポジションを使ってカルーセルが自動的に画面いっぱいに広がります。 Optional.
Number If exists, specifies the current active index. It is also used as the initial index. Must be modified on update:index event. (翻訳中) Optional.
最初に表示するons-carousel-itemを0始まりのインデックスで指定します。デフォルト値は 0 です。 Optional.
String v-ons-carousel-itemの高さを指定します。この属性は、direction属性に”vertical”を指定した時のみ有効になります。 Optional.
String v-ons-carousel-itemの幅を指定します。この属性は、direction属性に”horizontal”を指定した時のみ有効になります。 Optional.
String If this attribute is set to "none" the transitions will not be animated. (翻訳中) Optional.
Expression アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例:{duration: 0.2, delay: 1, timing: ‘ease-in’} Optional.
Boolean この属性がある時、タッチやドラッグで端までスクロールした時に、バウンドするような効果が当たります。 Optional.
Boolean この属性がある時、カルーセルをスワイプやドラッグで移動できるようになります。 Optional.
名前 概要
postchange 現在表示しているカルーセルの要素が変わった時に発火します。
prechange Fired just before the current carousel item changes. (翻訳中)
refresh カルーセルが更新された時に発火します。
overscroll カルーセルがオーバースクロールした時に発火します。
swipe Fires when the carousel swipes. (翻訳中)
update:index Fired right after user interaction. Useful to update index prop. (翻訳中)
postchange

現在表示しているカルーセルの要素が変わった時に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.carousel Object イベントが発火したCarouselオブジェクトです。
event.activeIndex Number 現在アクティブになっている要素のインデックス。
event.lastActiveIndex Number 以前アクティブだった要素のインデックス。
prechange

Fired just before the current carousel item changes. (翻訳中)

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.carousel Object イベントが発火したCarouselオブジェクトです。
event.activeIndex Number 現在アクティブになっている要素のインデックス。
event.lastActiveIndex Number 以前アクティブだった要素のインデックス。
refresh

カルーセルが更新された時に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.carousel Object イベントが発火したCarouselオブジェクトです。
overscroll

カルーセルがオーバースクロールした時に発火します。

パラメーター
名前 概要
event Object イベントオブジェクトです。
event.carousel Object カルーセルが更新された時に発火します。
event.activeIndex Number 現在アクティブになっている要素のインデックス。
event.direction String オーバースクロールされた方向が得られます。”up”, “down”, “left”, “right”のいずれかの方向が渡されます。
event.waitToReturn Function この関数はPromiseオブジェクトを引数として受け取ります。渡したPromiseオブジェクトがresolveされるかrejectされるまで、カルーセルはスクロールバックしません。
swipe

Fires when the carousel swipes. (翻訳中)

パラメーター
名前 概要
event Object イベントオブジェクト。
event.index Number 現在アクティブになっているons-carouselのインデックスを返します。
event.options Object Animation options object. (翻訳中)
update:index

Fired right after user interaction. Useful to update index prop. (翻訳中)

パラメーター
名前 概要
event Number New value for index prop. (翻訳中)

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。