jQueryでスライダー機能を実装 – jQuery slider2

１．jQueryスライダーとは

jQueryスライダーとは、WEBサイト上で画像や動画などのコンテンツをスムーズに横スライド、または回転させて表示させるツールのこと。ここ数年、企業サイト等のトップページで多用されている。種類は多岐にわたり、エフェクトの設定はもちろんのこと、メーターの種類やナビゲーション、画像別に見せる時間を変えることができるものまで存在する。

下記あたりにまとめられている。
【jQuery】かっこいいスライドショーまとめ
jQueryを使ったスライダー20選。プラグインリンク集

２．ダウンロード

今回はお試し用として、もっともシンプルそうな「jQuery slider2」というものを使ってみる。

下記サイトよりダウンロード
jQuery本体
jQuery slider2

３．適当な場所へ配置

４．head内で読み込む

cssとjsを読み込み、functionを記述。
ここのfunction内で簡単な設定が可能。

<link href="jquery.slider.css" rel="stylesheet">
<script src="jquery.slider.min.js"></script>
<script>
    $(function()
    {
        $('#slider').slider({     // スライドさせるセレクタ
            showControls : true,  // コントロールボタン
            autoplay     : true,  // 自動スライド
            showPosition : true,  // 現在の表示位置
            hoverPause   : true,  // マウスオーバーで停止
            wait         : 3000,  // 停止時間
            fade         : 500,   // フェード時間
            direction    : 'left' // スライド方向
        });
    });
</script>

５．CSS

使用しているcssに下記を追記。（jquery.slider.cssとは別で）

#slider {
margin: 0 auto;
width: 980px;
height: 340px;
border: solid 1px #ccc;
}
#slider div {
padding: 50px 10px 0 10px;
}

６．body内の記述

表示させたい箇所へ下記のように記述。
用意する画像ファイルはCSSへ記述したwidth,heightと合わせておく。

<div id="slider">
<div><img src="img/sample1.jpg"></div>
<div><img src="img/sample2.jpg"></div>
<div><img src="img/sample3.jpg"></div>
<div><img src="img/sample4.jpg"></div>
<div><img src="img/sample5.jpg"></div>
</div>

以上。実装はとても簡単であったが、企業サイトのトップページを飾るには少々物足りない。次は少々凝ったスライダーを試してみる。