※この記事は「古籏一浩のJavaScriptラボ」の第20回です。過去の記事も合わせてご覧ください。
定番のカルーセルを作ろう
Amazonでおなじみの「カルーセルパネル」は、最近ではさまざまなサイトで見かける定番のUIになりました。アニメーション機能に強いJavaScript/Ajaxフレームワーク「UIZE JavaScript Framework」（以下、UIZE Framework）でも専用のウィジェットが用意されており、カルーセルパネルを手軽に作成できます。
水平、垂直のカルーセルが用意されている。他にもスライドタイプのものがある
今回はUIZE Frameworkを使って、1枚の大きな画像を切り替えて表示するカルーセルと、複数の画像を同時に並べて表示するカルーセルの2種類を作成してみましょう。
作成するカルーセルパネルの完成図。1枚の画像を表示するタイプ（左）と、複数の画像を表示するタイプ（右）の2種類を作る
1枚の画像を切り替えるカルーセル
はじめに、1枚の大きな画像を切り替えて表示するカルーセルを作ります。UIZE Frameworkのライブラリーファイルに含まれる「widget.slideshow.css」をコピーし、linkタグを使ってHTMLに読み込ませます。
<link rel="stylesheet" href="css/widget.slideshow.css">
次にカルーセル用のオリジナルのCSSを定義します。ここでは以下のようなCSSを作成し、「carousel.css」という名前を付けて保存します。carousel.cssもlinkタグを使って読み込ませておきましょう。
.scrollyCarousel {
margin:auto;
border:5px solid #000;
position:relative;
}
.scrollyCarousel, .scrollyView, .scrollyView .carouselFrame {
width:600px;
height:338px;
overflow:hidden;
position:relative;
}
.scrollyView .carouselFrame {
position:absolute;
top:0;
}
.scrollyView .carouselFrame img {
position:absolute;
left:0;
top:0;
width:600px;
height:338px;
}
.navButton {
position:absolute!important;
bottom:17px;
opacity:.7;
filter:alpha(opacity=70);
}
.navButtonGrayed {
opacity:.1;
filter:alpha(opacity=10);
}
.scrollyView .carouselFrame .carouselFrameTitle {
position:absolute;
width:100%;
height:50px;
font-size:43px;
letter-spacing:5px;
font-weight:bold;
text-align:center;
color:#fff;
background:#234;
border:1px solid #888;
border-left:none;
border-right:none;
bottom:5px;
opacity:.4;
filter:alpha(opacity=40);
}
.scrollyNavi {
margin:auto;
width:600px;
position:relative;
color:white;
font-size:14pt;
letter-spacing:4pt;
