Onsen UI Tips - ons-carousel を使ってカルーセルを実装する方法

phi phi on Onsen UI

Onsen UI Tips です.

ons-carousel を使ってカルーセルを実装する方法について紹介します.
とはいっても公式サンプルを引っ張ってきただけですが...

Runstant

今回作るサンプルです.

Flow

1. OnsenUI の雛形を用意しよう

Onsen UI のススメ | phiary』のサンプルをベースとして作っていきます.

runstant

2. ons-carousel を作る

今回は, ons-toolbar は必要ないので削除して 空の ons-page に ons-carousel を設置します.

<ons-page>  
  <ons-carousel>

  </ons-carousel>
</ons-page>  

そして, ons-carousel の中に ons-carousel-item を並べていくことで個々のスライドを定義していきます.

<ons-page>  
  <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
    <ons-carousel-item class='red'>
      <div class="item-label">Red</div>
    </ons-carousel-item>
    <ons-carousel-item class='yellow'>
      <div class="item-label">Yellow</div>
    </ons-carousel-item>
    <ons-carousel-item class='green'>
      <div class="item-label">Green</div>
    </ons-carousel-item>
    <ons-carousel-item class='cyan'>
      <div class="item-label">Cyan</div>
    </ons-carousel-item>
    <ons-carousel-item class='blue'>
      <div class="item-label">Blue</div>
    </ons-carousel-item>
  </ons-carousel>
</ons-page>  

ons-carousel には様々な属性を指定できます.
今回は下記を指定しました.

  • swipeable ...スワイプできるようにする
  • overscrollable ... 端までスクロールした際にはみ出て戻ってきてくれるようにする. iphone の home 画面っぽいやつ.
  • auto-scroll ... carosel-item 同士の境界まで良い感じでスクロールしてくれる
  • fullscreen ... カルーセルを画面いっぱいに広げる

他にも細かく知りたい方は公式ドキュメントを御覧ください.

ons-carousel | Onsen

これで左右にスワイプできるようになっているのが分かるかと思います. 実は, これでほぼ完成です.

runstant

3. 見た目を整える

なんでも良いんですが, これじゃちょっとアレなんで 見た目を CSS で調整しましょう.

.item-label {
  font-size: 4rem;
  text-align: center;
  line-height: 100vh;
  color: white;
  font-weight: bold;
}

.red { background-color: hsl(0, 50%, 50%); }
.yellow { background-color: hsl(60, 50%, 50%); }
.green { background-color: hsl(120, 50%, 50%); }
.cyan { background-color: hsl(180, 50%, 50%); }
.blue { background-color: hsl(240, 50%, 50%); }

runstant

4. 常に表示したいやつは ons-carousel-cover で

ons-carousel-item と同じ階層に ons-carousel-cover を置くとスクロールに影響を受けず常に表示できる要素を設置できます.

html

<ons-page>  
  <ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">
    ...
    <ons-carousel-item class='blue'>
      <div class="item-label">Blue</div>
    </ons-carousel-item>
    <ons-carousel-cover>
      <div class="cover-label">Swipe left or right</div>
    </ons-carousel-cover>
  </ons-carousel>
</ons-page>  

css

.cover-label {
  text-align: center;
  position: absolute;
  left: 0px;
  width: 100%;
  bottom: 10px;
  color: white;
}

runstant

5. JavaScript で自動スクロールさせよう

ons-carousel に var という属性で変数名を指定しています.

<ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel">  

この変数名は, JavaScript からカルーセルを操作する際に参照する名前です.

今回は, 自動スクロールを実装してみました.

ons.bootstrap();  
ons.ready(function() {  
  setInterval(function() {
    // 今のインデックスを取得
    var index = carousel.getActiveCarouselItemIndex();
    // 最後だったら最初に戻る
    if (index >= 4) {
      carousel.first();
    }
    // 次のアイテムにスライド
    else {
      carousel.next();
    }
  }, 2000);
});

2000 ミリ秒ごとに次にスクロールするのがわかるかと思います.

runstant

Reference