ons-carouselのループ

ons-carouselでループ表示するサンプルです。

See the Pen ons-carousel loop by senmyou (@senmyou) on CodePen.

ここでは ons-carousel-item を3つ使っています。postchangeイベントハンドラで、アクティブインデックスが端にきたときに隠れている部分を書き換え、真ん中に移動し、最後に端の内容を書き換えています。私が作成したアプリでは ons-carousel-item 内にカレンダーを作成し、スワイプでカレンダーを送れるようにしました。

ところで onsen ui v1 で「setActiveCarouselItemIndex()」だった関数は onsen ui v2 で「setActiveIndex()」に名前が変わったんですね。今頃気づきました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA