Web制作の現場で使えるjQuery　UIデザイン入門 ― 第23回

jQuery＋CSSによるカルーセルパネルの作り方

2009年12月11日 11時00分更新

文● 西畑一馬／to-R

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第23回です。過去の記事もご覧ください。

「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。

今回制作するサンプル


（画像クリックでサンプルページを表示します）

HTML/CSSでカルーセルのベースを作成する

　今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp要素（id名「carouselPrev」）、右方向にスライドさせる「進む」ボタン用のp要素（id名「carouselNext」）、パネルを実際に表示する領域としてdiv要素（id名「carouse」）を配置します。carouseの内側には非表示領域を含むパネル全体を格納するdiv要素（id名「carouselInner」）を配置し、その内側にパネルをul/li要素で記述します。ul要素にはclass属性「column」を設定し、パネルの数だけ繰り返し記述します。

▼サンプル01（HTML部分）


<div id="carouselWrap">
    <p id="carouselPrev"><img src="./images/btn_prev.gif" alt="前へ" /></p>
    <p id="carouselNext"><img src="./images/btn_next.gif" alt="次へ" /></p>
    <div id="carouse">
        <div id="carouselInner">
            <ul class="column">
                <li><a href="#"><img src="./images/photo1_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo2_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo3_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
            </ul>
            <ul class="column">
                <li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
                （中略）
                <li><a href="#"><img src="./images/photo11_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo12_thum.jpg" alt="" /></a></li>
            </ul>
            <ul class="column">
                <li><a href="#"><img src="./images/photo13_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo14_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo15_thum.jpg" alt="" /></a></li>
                <li><a href="#"><img src="./images/photo16_thum.jpg" alt="" /></a></li>
            </ul>
        </div>
    </div>
</div>

　このHTMLをCSSで次のようにレイアウトします。


CSSでカルーセルのレイアウトを作成する

▼サンプル01（CSS部分）


*{
    margin:0;
    padding:0;
}
#carouselWrap{
    margin:100px auto;
    width:620px;
    height:135px;
    padding:5px;
    background:url("./images/background.gif");
    position:relative;
}
#carouselPrev{
    position:absolute;
    top:65px;
    left:-8px;
    cursor:pointer;
}
#carouselNext{
    position:absolute;
    top:65px;
    right:-8px;
    cursor:pointer;
}
#carouse{
    width:100%;
    height:100%;
    overflow:hidden;
}
#carouselInner ul.column{
    width:605px;
    height:105px;
    padding:15px 0 15px 15px;
    list-style-type:none;
    float:left;
}
#carouselInner ul.column li{
    float:left;
    margin-right:10px;
    display:inline;
}
#carouselInner ul.column li img{
    border:none;
}

　カルーセルを囲む#carouselWrapは、カルーセルの外枠（装飾要素）を背景画像として配置します。外枠の幅（5px）の分の余白をpaddingで取り、表示領域（オレンジ線の内側の白の部分）のwidthとheightを設定します。


背景画像として配置する「background.gif」（オレンジの外枠部分）。内側の表示領域を#carouselWrapのwidthとheightに設定する

　「前へ」ボタン（#carouselPrev）や「次へ」ボタン（#carouselNext）をposition:absoluteで配置するため、#carouselWrapにはposition:relativeを設定しておきます。#carouselPrevと#carouselNextはそれぞれ#carouselWrapの左右に配置し、マウスカーソルの形状を「pointer」に変更しておきましょう(関連記事)。

　パネルの表示領域（#carouse）は#carouselWrapで設定した表示領域と同じサイズになるように、width:100%とheight:100%を設定し、表示領域からはみ出た部分をoverflow:hiddenで非表示にします。

　パネル（ul.column）はfloatで横並びにし、ul.columnの内側のli要素もfloatで横並びにします。li要素にfloatを指定した場合、Internet Explorer 6（IE6）ではサイズがずれてしまうバグがありますので、display:inlineを設定して回避します。これで、HTMLが先ほどの完成図のように配置できました。なお、パネル全体を格納する#carouselInnerにはパネル全体の横幅（width）を設定する必要がありますが、今回はパネルの数を柔軟に変更できるように、CSSではなくjQuery側で計算して設定します。