古籏一浩のJavaScriptラボ ― 第20回

飛び出すカルーセルをUIZE Frameworkで作る（前編）

2009年11月25日 13時00分更新

文● 古籏一浩

※この記事は「古籏一浩の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;