イメージ・スライダー

2013.08.26　Posted by Coding_team

Webプログラミング

みなさん、こんにちは。
ウェブラボのコーダを担当しております、豊岡です。
今回から「ウェブラボ技術メモ」と題しまして、日ごろ私たちがお客様のサイトに取り入れたり、調査していて見つけた「コレは！」というjQuery プラグインを紹介していきたいと思います。
何卒よろしくお願いいたします。

第一回目の今日は、スライダーをご紹介致します。
スライダーってどんなの！？
↑ デモページはこちらです。

デモページはご覧頂けましたでしょうか？
色々なサイトでよく目にする画像が様々に切り替わる効果を付与してくれるプログラムです。
私のイチオシは、

★bxSlider

こちらです。
見た目はシンプルなのですが、オプション(以下で簡単に説明致します)もたくさんあり、最近流行りの「レスポンシブ・ウェブデザイン」にも対応しているすぐれものです。

■ インストール方法

<!– jQuery library を読み込ませます–>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<!– bxSlider の Javascript ファイルを読み込ませます –>
<script src=”/js/jquery.bxslider.min.js”></script>
<!– bxSlider 用の CSS ファイルを読み込ませます。 –>
<link href=”/lib/jquery.bxslider.css” rel=”stylesheet” />

スライドさせたい複数枚の画像を ul > li > img で記述していきます。

その際に、ul 要素に任意のクラス名を付与します。

ここでは、「bxslider」としましょう。

そして、アクティベートするために以下を記述します。

$(document).ready(function(){
$(‘.bxslider’).bxSlider();
});

■ オプション設定

デフォルトのスライドでも十分運用できるものですが、画像の切り替え方法を変更したり、切り替わる速度などを変更したいときなどもでてきますよね。
そんな時は下記のようなオプションを付与していきます。
また、レスポンシブ・ウェブデザインにも対応しているため、スマートフォンやタブレット端末用のタッチやスワイプといった動作で反応するようにすることも可能です。

mode

画像の切替方法の選択(水平方向、垂直方向、フェード)

default: ‘horizontal’
options: ‘horizontal’, ‘vertical’, ‘fade’

speed

1枚の画像の表示時間 (単位は ms)

default: 500
options: integer(好きな数値をミリ秒単位で設定可能)

captions

画像にキャプションを付けることもできます。表示したい文言は img 要素の title 属性に記述します。

default: false
options: boolean (true / false)

関連記事こちらの記事も合わせてどうぞ。