TechNote

事務屋のおぼえがき

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

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



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でスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNotejQueryでスライダー機能を実装 - 横幅いっぱいのスライダーFullWideSlider - TechNote

以前のエントリーjQueryでスライダー機能&#...

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNotejQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など...

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNotejQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...


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

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