コンテンツへスキップ

hifiveのUIライブラリ紹介「カルーセル」

by : 2016/07/20

hifiveはHTML5アプリケーション用のフレームワークですが、業務要件でありがちな各種UIについてもライブラリを提供しています。

今回はその中からカルーセルについて紹介します。

hifive カルーセル

実際の動きを紹介します。

使い方ですが、まず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>

view raw

index.html

hosted with ❤ by GitHub

さらに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;
}
: // 他の色は省略

view raw

index.css

hosted with ❤ by GitHub

最後にJavaScriptはこれだけです。


$(function() {
h5.core.controller('.carousel-wrapper', h5.ui.components.carousel.CarouselController);
});

view raw

index.js

hosted with ❤ by GitHub

これで .carousel-wrapper に対してカルーセルが適用されます。

カルーセルはマウスやタップ操作でドラッグできます。複数の類似項目から選択してもらう場合などのUIに使えるのではないでしょうか。ぜひお試しください。

hifive UI Library Top Page

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。