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

スポンサーリンク

昨今のWebサイトのトップページでよく見かけるスライダーを自社Webサイトに実装してみたときの試行錯誤をメモ。スライダー初使用のため、入門編としてjQuery slider2をテスト環境で使用してみた。

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

1.jQueryスライダーとは

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

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

2.ダウンロード

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

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

f:id:kojikoji75:20130712124617j:plain

3.適当な場所へ配置

4.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>

5.CSS

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

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

6.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>

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

現場で役立つjQueryデザインパーツライブラリ

現場で役立つjQueryデザインパーツライブラリ

jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック

jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック

タイトルとURLをコピーしました