hifiveのUIライブラリ紹介「カルーセル」
hifiveはHTML5アプリケーション用のフレームワークですが、業務要件でありがちな各種UIについてもライブラリを提供しています。
今回はその中からカルーセルについて紹介します。
実際の動きを紹介します。
使い方ですが、まずHTMLは次のように定義します。
<div class="carousel-wrapper"> | |
<div class="item red"> | |
<p>アイテム1</p> | |
</div> | |
<div class="item blue"> | |
<p>アイテム2</p> | |
</div> | |
<div class="item green"> | |
<p>アイテム3</p> | |
</div> | |
<div class="item yellow"> | |
<p>アイテム4</p> | |
</div> | |
<div class="item purple"> | |
<p>アイテム5</p> | |
</div> | |
<div class="item gray"> | |
<p>アイテム6</p> | |
</div> | |
</div> |
さらにCSSが次のようになります。
ul.carousel>li { | |
display: block; | |
} | |
.carousel-wrapper { | |
width: 800px; | |
height: 200px; | |
margin: 20px 0 20px 0; | |
padding: 5px; | |
text-align: center; | |
vertical-align: center; | |
cursor: pointer; | |
} | |
.carousel-wrapper .item { | |
width: 120px; | |
height: 160px; | |
line-height: 160px; | |
} | |
.red { | |
background-color: #F3C0AB; | |
} | |
: // 他の色は省略 |
最後にJavaScriptはこれだけです。
$(function() { | |
h5.core.controller('.carousel-wrapper', h5.ui.components.carousel.CarouselController); | |
}); |
これで .carousel-wrapper
に対してカルーセルが適用されます。
カルーセルはマウスやタップ操作でドラッグできます。複数の類似項目から選択してもらう場合などのUIに使えるのではないでしょうか。ぜひお試しください。
コメントは受け付けていません。