Skip to content

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

by : 2016/07/20

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

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

hifive カルーセル

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

使い方ですが、まずHTMLは次のように定義します。

さらにCSSが次のようになります。

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

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

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

hifive UI Library Top Page

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

banner_02

From → hifive

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

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