カルーセルを表示できるコンポーネント。
<ons-carousel style="width: 100%; height: 200px">
<ons-carousel-item>
...
</ons-carousel-item>
<ons-carousel-item>
...
</ons-carousel-item>
</ons-carousel>See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.
| 名前 | 型 / デフォルト値 | 概要 |
|---|---|---|
| direction | String | カルーセルの方向を指定します。"horizontal"か"vertical"を指定できます。"horizontal"がデフォルト値です。 Optional |
| fullscreen | この属性があると、absoluteポジションを使ってカルーセルが自動的に画面いっぱいに広がります。 Optional | |
| var | String | このカルーセルを参照するための変数名を指定します。 Optional |
| overscrollable | この属性がある時、タッチやドラッグで端までスクロールした時に、バウンドするような効果が当たります。 Optional | |
| item-width | String | ons-carousel-itemの幅を指定します。この属性は、direction属性に"horizontal"を指定した時のみ有効になります。 Optional |
| item-height | String | ons-carousel-itemの高さを指定します。この属性は、direction属性に"vertical"を指定した時のみ有効になります。 Optional |
| auto-scroll | この属性がある時、一番近いcarosel-itemの境界まで自動的にスクロールするようになります。 Optional | |
| auto-scroll-ratio | Number | 0.0から1.0までの値を指定します。カルーセルの要素をどれぐらいの割合までドラッグすると次の要素に自動的にスクロールするかを指定します。 Optional |
| swipeable | この属性がある時、カルーセルをスワイプやドラッグで移動できるようになります。 Optional | |
| disabled | この属性がある時、dragやtouchやswipeを受け付けなくなります。 Optional | |
| intial-index | Number | 最初に表示するons-carousel-itemを0始まりのインデックスで指定します。デフォルト値は 0 です。 Optional |
| auto-refresh | この属性がある時、子要素の数が変わるとカルーセルは自動的に更新されるようになります。 Optional | |
| ons-postchange | Expression | "postchange"イベントが発火された時の挙動を独自に指定できます。 Optional |
| ons-refresh | Expression | "refresh"イベントが発火された時の挙動を独自に指定できます。 Optional |
| ons-overscroll | Expression | "overscroll"イベントが発火された時の挙動を独自に指定できます。 Optional |
| ons-destroy | Expression | "destroy"イベントが発火された時の挙動を独自に指定できます。 Optional |
| シグネチャ | 概要 |
|---|---|
| next() | 次のons-carousel-itemを表示します。 |
| prev() | 前のons-carousel-itemを表示します。 |
| first() | 最初のons-carousel-itemを表示します。 |
| last() | 最後のons-carousel-itemを表示します。 |
| setSwipeable(swipeable) | swipeできるかどうかを指定します。 |
| isSwipeable() | swiapble属性があるかどうかを返します。 |
| setActiveCarouselItemIndex(index) | 表示するons-carousel-itemをindexで指定します。 |
| getActiveCarouselItemIndex() | 現在表示されているons-carousel-item要素のインデックスを返します。 |
| setAutoScrollEnabled(enabled) | auto-scroll属性があるかどうかを設定します。 |
| isAutoScrollEnabled() | auto-scroll属性があるかどうかを返します。 |
| setAutoScrollRatio(ratio) | オートスクロールするのに必要なratio値を指定します。0.0から1.0を必ず指定しなければならない。 |
| getAutoScrollRatio() | 現在のオートスクロールのratio値を返します。 |
| setOverscrollable(overscrollable) | overscroll属性があるかどうかを設定します。 |
| isOverscrollable() | overscroll属性があるかどうかを返します。 |
| refresh() | レイアウトや内部の状態を最新のものに更新します。ons-carousel-itemを動的に増やしたり、ons-carouselの大きさを動的に変える際に利用します。 |
| isDisabled() | disabled属性があるかどうかを返します。 |
| setDisabled(disabled) | disabled属性があるかどうかを設定します。 |
| on(eventName, listener) | イベントリスナーを追加します。 |
| once(eventName, listener) | 一度だけ呼び出されるイベントリスナを追加します。 |
| off(eventName, [listener]) | イベントリスナーを削除します。もしイベントリスナーが指定されなかった場合には、そのイベントに紐付いているイベントリスナーが全て削除されます。 |
| 名前 | 概要 |
|---|---|
| postchange | 現在表示しているカルーセルの要素が変わった時に発火します。 |
| refresh | カルーセルが更新された時に発火します。 |
| overscroll | カルーセルがオーバースクロールした時に発火します。 |
次のons-carousel-itemを表示します。
前のons-carousel-itemを表示します。
最初のons-carousel-itemを表示します。
最後のons-carousel-itemを表示します。
swipeできるかどうかを指定します。
| 名前 | 型 | 概要 |
|---|---|---|
| swipeable | Booelan | swipeableにする場合にはtrueを指定します。 |
swiapble属性があるかどうかを返します。
返り値: swipeableであればtrueを返します。
表示するons-carousel-itemをindexで指定します。
| 名前 | 型 | 概要 |
|---|---|---|
| index | Number | carousel要素のインデックスを指定します。 |
現在表示されているons-carousel-item要素のインデックスを返します。
返り値: 現在表示しているカルーセル要素のインデックスが返されます。
auto-scroll属性があるかどうかを設定します。
| 名前 | 型 | 概要 |
|---|---|---|
| enabled | Boolean | オートスクロールを有効にする場合にはtrueを渡します。 |
auto-scroll属性があるかどうかを返します。
返り値: オートスクロールが有効であればtrueを返します。
オートスクロールするのに必要なratio値を指定します。0.0から1.0を必ず指定しなければならない。
| 名前 | 型 | 概要 |
|---|---|---|
| ratio | Number | オートスクロールするのに必要な0.0から1.0までのratio値を指定します。 |
現在のオートスクロールのratio値を返します。
返り値: 現在のオートスクロールのratio値。
overscroll属性があるかどうかを設定します。
| 名前 | 型 | 概要 |
|---|---|---|
| overscrollable | Boolean | overscrollできるかどうかを指定します。 |
overscroll属性があるかどうかを返します。
返り値: overscrollできればtrueを返します。
レイアウトや内部の状態を最新のものに更新します。ons-carousel-itemを動的に増やしたり、ons-carouselの大きさを動的に変える際に利用します。
disabled属性があるかどうかを返します。
返り値: disabled状態になっていればtrueを返します。
disabled属性があるかどうかを設定します。
| 名前 | 型 | 概要 |
|---|---|---|
| disabled | Boolean | disabled状態にする場合にはtrueを指定します。 |
イベントリスナーを追加します。
| 名前 | 型 | 概要 |
|---|---|---|
| eventName | String | イベント名を指定します。 |
| listener | Function | イベントが発火した際に呼び出される関数オブジェクトを指定します。 |
一度だけ呼び出されるイベントリスナを追加します。
| 名前 | 型 | 概要 |
|---|---|---|
| eventName | String | イベント名を指定します。 |
| listener | Function | イベントが発火した際に呼び出される関数オブジェクトを指定します。 |
イベントリスナーを削除します。もしイベントリスナーが指定されなかった場合には、そのイベントに紐付いているイベントリスナーが全て削除されます。
| 名前 | 型 | 概要 |
|---|---|---|
| eventName | String | イベント名を指定します。 |
| listener | Function | イベントが発火した際に呼び出される関数オブジェクトを指定します。 |
現在表示しているカルーセルの要素が変わった時に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.carousel | Object | イベントが発火したCarouselオブジェクトです。 |
| event.activeIndex | Number | 現在アクティブになっている要素のインデックス。 |
| event.lastActiveIndex | Number | 以前アクティブだった要素のインデックス。 |
カルーセルが更新された時に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.carousel | Object | イベントが発火したCarouselオブジェクトです。 |
カルーセルがオーバースクロールした時に発火します。
| 名前 | 型 | 概要 |
|---|---|---|
| event | Object | イベントオブジェクトです。 |
| event.carousel | Object | カルーセルが更新された時に発火します。 |
| event.activeIndex | Number | 現在アクティブになっている要素のインデックス。 |
| event.direction | String | オーバースクロールされた方向が得られます。"up", "down", "left", "right"のいずれかの方向が渡されます。 |
| event.waitToReturn | Function | この関数はPromiseオブジェクトを引数として受け取ります。渡したPromiseオブジェクトがresolveされるかrejectされるまで、カルーセルはスクロールバックしません。 |