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.

関連情報

Prop一覧

名前 型 / デフォルト値 概要
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.
String v-ons-carousel-itemの高さを指定します。この属性は、direction属性に”vertical”を指定した時のみ有効になります。 Optional.
String v-ons-carousel-itemの幅を指定します。この属性は、direction属性に”horizontal”を指定した時のみ有効になります。 Optional.
Function Hook called whenever the user slides the carousel. It gets a decimal index and an animationOptions object as arguments. (翻訳中) 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 現在表示しているカルーセルの要素が変わった時に発火します。
refresh カルーセルが更新された時に発火します。
overscroll カルーセルがオーバースクロールした時に発火します。
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 以前アクティブだった要素のインデックス。
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されるまで、カルーセルはスクロールバックしません。
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に記載をお願いいたします。

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