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.
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| activeIndex | Number | Specify the index of the carousel item that should be shown. （翻訳中） Optional. |
| animation | String |
If this attribute is set to "none" the transitions will not be animated.
（翻訳中）
Optional.
|
| animationOptions | Expression | アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: ‘ease-in’} Optional. |
| autoRefresh | Boolean | この属性がある時、子要素の数が変わるとカルーセルは自動的に更新されるようになります。 Optional. |
| autoScroll | Boolean | この属性がある時、一番近いcarousel-itemの境界まで自動的にスクロールするようになります。 Optional. |
| autoScrollRatio | Number | 0.0から1.0までの値を指定します。カルーセルの要素をどれぐらいの割合までドラッグすると次の要素に自動的にスクロールするかを指定します。 Optional. |
| centered | Boolean | この属性がある時、選んでいるons-carousel-itemはカルーセルの真ん中へ行きます。項目がカルーセルよりも小さい場合にのみ、これは便利です。 Optional. |
| direction | String | カルーセルの方向を指定します。”horizontal”か”vertical”を指定できます。”horizontal”がデフォルト値です。 Optional. |
| disabled | Boolean | この属性がある時、dragやtouchやswipeを受け付けなくなります。 Optional. |
| fullscreen | Boolean | この属性があると、absoluteポジションを使ってカルーセルが自動的に画面いっぱいに広がります。 Optional. |
| initialIndex | Number | 最初に表示するons-carousel-itemを0始まりのインデックスで指定します。デフォルト値は 0 です。 Optional. |
| itemHeight | String | ons-carousel-itemの高さを指定します。この属性は、direction属性に”vertical”を指定した時のみ有効になります。 Optional. |
| itemWidth | String | ons-carousel-itemの幅を指定します。この属性は、direction属性に”horizontal”を指定した時のみ有効になります。 Optional. |
| overscrollable | Boolean | この属性がある時、タッチやドラッグで端までスクロールした時に、バウンドするような効果が当たります。 Optional. |
| swipeable | Boolean | この属性がある時、カルーセルをスワイプやドラッグで移動できるようになります。 Optional. |
| 名前 | 概要 |
|---|---|
| postchange | 現在表示しているカルーセルの要素が変わった時に発火します。 |
| prechange | Fired just before the current carousel item changes. （翻訳中） |
| refresh | カルーセルが更新された時に発火します。 |
| overscroll | カルーセルがオーバースクロールした時に発火します。 |
| swipe | Fires when the carousel swipes. （翻訳中） |
| update:active-index |
Fired right after user interaction. Useful to update active-index prop.
（翻訳中）
|
現在表示しているカルーセルの要素が変わった時に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.carousel | Object | イベントが発火したCarouselオブジェクトです。 |
| event.activeIndex | Number | 現在アクティブになっている要素のインデックス。 |
| event.lastActiveIndex | Number | 以前アクティブだった要素のインデックス。 |
Fired just before the current carousel item changes. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.carousel | Object | イベントが発火したCarouselオブジェクトです。 |
| event.activeIndex | Number | 現在アクティブになっている要素のインデックス。 |
| event.lastActiveIndex | Number | 以前アクティブだった要素のインデックス。 |
カルーセルが更新された時に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.carousel | Object | イベントが発火したCarouselオブジェクトです。 |
カルーセルがオーバースクロールした時に発火します。
Fires when the carousel swipes. （翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクト。 |
| event.index | Number | 現在アクティブになっているons-carouselのインデックスを返します。 |
| event.options | Object | Animation options object. （翻訳中） |
Fired right after user interaction. Useful to update active-index prop.
（翻訳中）
| 名前 | 型 | 概要 |
|---|---|---|
| event | Number |
New value for active-index prop.
（翻訳中）
|
Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。
バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。
あわせて、下記の情報も参考にしてください。