カルーセルのHTMLを設定する
UIZE Frameworkによるカルーセル表示は、あらかじめ決められたルールに従ってHTMLタグと関連するスタイルシートクラス名を記述します。表示したい画像とナビゲーションを以下の形式で設定しましょう。
<div class="scrollyCarousel">
<div id="page_scrolly-view" class="scrollyView">
<div class="carouselFrame" style="left:【表示座標】">
<img src="【表示する画像のURL】">
</div>
：
</div>
<a id="page_scrolly_left" href="#" class="navButton"><div class="arrow towardsFirst gotoPrevious"></div></a>
<a id="page_scrolly_right" href="#" class="navButton"><div class="arrow towardsLast gotoNext"></div></a>
</div>
表示したい画像の枚数分だけ<div class="carouselFrame"> ～</div>を繰り返し記述します。【表示座標】には、画像の横幅を加算していった値を設定します。たとえば横幅が600pxの画像であれば、以下のようになります。
- 1枚目の画像：0px
- 2枚目の画像：600px
- 3枚目の画像：1200px
- 4枚目の画像：1800px
カルーセルは、あらかじめ複数の画像を横並びに配置しておき、画像のX座標の値を変更することで表示を切り替えています。カルーセル専用のライブラリーでは画像の位置を自動的に計算してくれるものが一般的ですが、UIZE FrameworkのウィジェットではCSSのleftプロパティに画像のX座標を設定しておく必要があります。UIZE Frameworkは上下左右にスクロールするモジュールを利用して擬似的にカルーセル表示を実現しているためです。画像の座標がずれてしまうとカルーセルの動作や表示がおかしくなる場合がありますので、表示結果に異常があった場合は座標を確認してください。
画像を切り替えるナビゲーションボタンのID名やスタイルシートクラス名はあらかじめ決まっており、自分では設定できません。ボタン用の画像は、imagesフォルダ内のnav-arrowsに以下の名前で用意しておきましょう。
- nav-arrow-horz-first.gif：最初を示すボタン
- nav-arrow-horz-last.gif：最後を示すボタン
- nav-arrow-horz-next.gif：次を示すボタン
- nav-arrow-horz-previous.gif：前を示すボタン
ナビゲーションボタンは好みのデザインの画像を用意しておく
