このページの本文へ

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

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

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「古籏一浩のJavaScriptラボ」の第20回です。過去の記事も合わせてご覧ください。

uize image

定番のカルーセルを作ろう

 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;


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング