flexslider

今日紹介するのは jQuery プラグインの［FlexSlider］です。
これ、かなり便利です。

レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。
とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。

まずはサンプルをご覧ください。

【FlexSlider】→サンプルデモ

高機能ですが、その導入方法は比較的簡単です。

［FlexSlider］の導入方法

まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。

http://flexslider.woothemes.com

続いて <head>〜</head> 内にダウンロードしたスクリプトとスタイルシートを読み込みます。
このとき忘れずにjQuery本体も読み込んでおきましょう。

<link rel="stylesheet" href="flexslider.css" type="text/css" />
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>

スライダーを表示させるマークアップは以下のとおり。
シンプルですね。

<div class="flexslider">
	<ul class="slides">
		<li><img src="slider1.jpg" /></li>
		<li><img src="slider2.jpg" /></li>
		<li><img src="slider3.jpg" /></li>
		<li><img src="slider4.jpg" /></li>
	</ul>
</div>

最後に、スライドの設定のためのコードをhead内に記述。

<script>
$(window).on("load", function() {
	$('.flexslider').flexslider();
});
</script>

基本的にはこれで動くようになります。

【FlexSlider】→サンプルデモ

画像にリンクを貼ったり、キャプションを挿入したい場合は以下のようにマークアップします。

<div class="flexslider">
	<ul class="slides">
		<li><a href="https://on-ze.com"><img src="slider1.jpg" /></a><p class="flex-caption">ここはキャプションです</p></li>
		<li><a href="https://on-ze.com"><img src="slider2.jpg" /></a><p class="flex-caption">ここはキャプションです</p></li>
	</ul>
</div>

オプション設定

FlexSliderには膨大なオプションが用意されています。
以下でそれらを紹介します。

基本的なオプション

namespace
FlexSliderのスクリプトが生成する要素につく接頭辞。デフォルトは"flex-"です。
selector
どの部分をスライドするかを指定できます。デフォルトは".slides > li"です。
animation
スライドの方式。"fade"か"slide"のどちらかを指定できます。デフォルトは"fade"です。
easing
スライド切り替え時のアニメーションのイージングです。デフォルトは"swing"で、jQuery easing pluginの各メソッドが使えます。
direction
横スライドか縦スライドかを指定できます。横にスライドするのがhorizontal、縦にスライドするのがverticalです。デフォルトは"horizontal"です。
reverse
この値を"true"にすると、directionがhorizontalなら「進む」が左方向、「戻る」が右方向になります。directionがverticalなら「進む」が下から上、「戻る」が上から下へと、各スライドの方向が逆になります。デフォルトは"false"です。
animationLoop
スライドをループさせるかどうかを指定できます。trueの場合はループをしてfalseの場合はループをしません。デフォルトは"true"です。
smoothHeight
スライダーの高さが変わるとき、高さをアニメーションしながら変えるか、一瞬で変えるかを指定できます。デフォルトは"false"です。
startAt
何枚目のスライドから開始するか。デフォルトは0です。
slideshow
自動でスライドを進めるかどうか。デフォルトはtrue。
slideshowSpeed
スライドショーでスライドする間隔のスピードを調節できます。デフォルトは7000で、数値が低いほど早く、高いほど遅くなります。
animationSpeed
アニメーション時の動作のスピードです。数値が低いほど早く、高いほど遅くなります。デフォルトは600です。
initDelay
スライドショーが始まるまでの遅延。デフォルトは0で、ミリ秒単位で指定できます。
randomize
スライドの順番をランダムにするか否か。デフォルトはfalseです。

ユーザビリティに関するオプション

pauseOnAction
インタラクティブな操作をしている間、スライドショーを停止するか否か。デフォルトはtrueです。
pauseOnHover
マウスオーバーでスライドショーを止めるか否か。デフォルトはfalseです。
useCSS
スライダーに CSS3 のtransitionを適用するかどうか。デフォルトはtrueです。
touch
指でタッチ操作するのを許可するかどうか。デフォルトはtrueです
video
動画をスライドに含むことを許可するかどうか。デフォルトはfalseです。

コントロールに関するオプション

controlNav
スライダーのナヴィゲーションを表示させることができます。デフォルトはtrueで、falseにすると非表示になります。
directionNav
両サイドにあるprevとnextのコントロールボタンを表示させることができます。デフォルトはtrueで、falseにすると非表示になります。
prevText
「戻る」のナビゲーションの文字列。デフォルトは"Previous"です。
nextText
「進む」のナビゲーションの文字列。デフォルトは"Next"です。

ナヴィゲーションに関するオプション

keyboard
キーボードの左右キーで操作することを許可するか否か。デフォルトは"true"です。
multipleKeyboard
複数のスライダーにキーボード操作を同時に許可するか否か。デフォルトは"false"です。
mousewheel
マウスホイール操作を許可するか否か。デフォルトは"false"です
pausePlay
スライドショーを「再生／停止」するボタンを表示するか否か。デフォルトはfalseです。
pauseText
pausePlayをtrueに指定した場合に表示される停止ボタンのテキストを変更できます。デフォルトは"Pause"です。
playText
pausePlayをtrueに指定した場合に表示される再生ボタンのテキストを変更できます。デフォルトは"Play"です。

特別なプロパティに関するオプション

controlsContainer
クラスセレクターを使うこと。
デフォルトは［.flexslider］要素。
例としては［.flexslider-container］など。対象要素が見つからなかった場合は無視される。
manualControls
カスタムコントロール宣言。
例えば［.flex-control-nav li］とか［#tabs-nav li img］など、目標のセレクターを宣言します。
コントロールナビにある要素の数をスライドの数と合わせる必要あり。
sync
２つのスライダーを同期させることができます。
asNavFor
サムネイルのナビゲーションを使うときに親スライダーと紐付けるときのオプション。親スライダーのセレクターを指定。

カルーセルに関するオプション

itemWidth
カルーセルを設定した際の画像１枚の幅。デフォルトは0です。
itemMargin
カルーセルの画像１枚のマージン。デフォルトは0です。
minItems
カルーセルの画像を最低で何枚を一画面に表示するか。デフォルトは0です。
maxItems
カルーセルの画像を最大で何枚を一画面に表示するか。デフォルトは0です。
move
カルーセルの画像をスライドで何枚動かすか。0だと全部動かす。デフォルトは0です。

CallBack API に関するオプション

【例】start:function(){ ※ここにスクリプトを書く }で実装できます。

start: function(){}
最初のスライドがロードされた瞬間に発生するコールバック。
before: function(){}
それぞれのスライドが動くときに発生するコールバック。
after: function(){}
それぞれのスライドが動き終わったときに発生するコールバック。
end: function(){}
スライドが最後まで着いたときに発生するコールバック。
added: function(){}
スライドが追加されたときに発生するコールバック。
removed: function(){}
スライドが削除されたときに発生するコールバック。

…どうですか。ため息が出るほどの、この圧倒的なオプション量は！
相当凝ったことができる Callback API に関するオプションも用意されていますし、痒いところにはすべて手が届くのではないでしょうか。詳しくは FlexSlider の配布ページへ。
また実際のデモをご覧になりたい方は以下のサイトをどうぞ。

【FlexSlider】→サンプルデモ

関連情報

同じようにスライダーまたはスライドショーを実装する以下のjQueryプラグインもオススメです。

またjQueryについて学ぶならコチラの書籍がオススメです。

jQuery最高の教科書