C04-08 : FlexSlider 2

準備

jQueryライブラリのため、jQueryとセットで読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
<link type="text/css" rel="stylesheet" href="js/flexslider/flexslider.css">
<script type="text/javascript" src="js/flexslider/jquery.flexslider-min.js"></script>

シンプルなフリックスライダー

FlexSlider2で作る最もシンプルなフリックスライダーです。デフォルトではアニメーションがフェードになっているためスライドに変更しています。 

$(window).load(function() {
	$('.flexslider-simple').flexslider({
		animation: 'slide'
	});
});

<div class="flexslider" id="flexslider-simple">
	<ul class="slides">
		<li><img src="img/001.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/002.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/003.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/004.jpg" width="320" heigth="210" alt=""></li>
	</ul>
</div>

サムネイル付きのフリックスライダー

先ほどのシンプルなフリックスライダーにサムネイルを付けたものです。data属性でサムネイル画像を設定し、オプションで「controlNav: 'thumbnails'」とすることで生成されます。

$(window).load(function() {
	$('.flexslider-thumb').flexslider({
		animation: 'slide',
		controlNav: 'thumbnails'
	});
});

<div class="flexslider" id="flexslider-thumb">
	<ul class="slides">
		<li data-thumb="img/001.jpg"><img src="img/001.jpg" width="320" heigth="210" alt=""></li>
		<li data-thumb="img/002.jpg"><img src="img/002.jpg" width="320" heigth="210" alt=""></li>
		<li data-thumb="img/003.jpg"><img src="img/003.jpg" width="320" heigth="210" alt=""></li>
		<li data-thumb="img/004.jpg"><img src="img/004.jpg" width="320" heigth="210" alt=""></li>
	</ul>
</div>

サムネイル付きのフリックスライダー（カルーセル）

FlexSlider2を使ってカルーセルとスライダーを作成し、2つを連動させることができます。タップされたカルーセルに対応する位置のスライドに切り替えたり、表示されているスライドにあわせてカルーセルが切り替わります。
もちろん、カルーセルだけを独立させて動かすこともできます。 

$(window).load(function() {
	$('#flexslider-cs').flexslider({
		animation: "slide",
		controlNav: false,
		animationLoop: false,
		slideshow: false,
		sync: "#flexslider-carousel"
	});

	$('#flexslider-carousel').flexslider({
		animation: "slide",
		controlNav: false,
		animationLoop: false,
		slideshow: false,
		itemWidth: 223,
		itemMargin: 5,
		minItems: 2,
		maxItems: 4,
		asNavFor: '#flexslider-cs'
	});
});

<div class="flexslider" id="flexslider-cs">
	<ul class="slides">
		<li><img src="img/001.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/002.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/003.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/004.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/005.jpg" width="320" heigth="210" alt=""></li>
	</ul>
</div>
<div class="flexslider" id="flexslider-carousel">
	<ul class="slides">
		<li><img src="img/001.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/002.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/003.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/004.jpg" width="320" heigth="210" alt=""></li>
		<li><img src="img/005.jpg" width="320" heigth="210" alt=""></li>
	</ul>
</div>

オプション

プロパティ 初期値 説明
namespace flex- FlexSlider2によって生成されるクラス名のプレフィックス（接頭文字）を設定します。
selector .slides > li スライド要素までのセレクタを設定します。
animation fade 切り替えアニメーションの種類を "fade" or "slide" から設定します。
easing swing 切り替えアニメーションのイージングを "swing" or "linear" から設定します。jQuery easing pluginを読み込むことで設定できる値を拡張することができます。
direction horizontal animationでslideを設定していた場合に、スライドする方向を "horizontal" or "vertical" から設定します。
reverse false trueの場合、アニメーションを逆再生します。
animationLoop true trueの場合、最後のスライドの次は最初の要素になります。falseの場合、最後のスライドになったら次のスライドを表示できなくなります（戻ることはできます）。
smoothHeight false trueの場合、スライドごとの高さを内容量に合わせて自動的にリサイズします。
startAt 0 最初に表示されるスライドの番号を設定します。0からカウントアップするため、1番目は0になります。
slideshow true trueの場合、スライドが自動で切り替わります。
slideshowSpeed 7000 自動切り替えの待機時間をミリ秒単位で設定します。
animationSpeed 600 スライドの切り替えアニメーションの再生時間をミリ秒単位で設定します。
initDelay 0 FlexSlider2の初期化遅延時間をミリ秒単位で設定します。
randomize false スライドの順番をランダムにします。
pauseOnAction true trueの場合、ユーザーがスライダーを操作したらスライドショーを停止させます。
pauseOnHover false trueの場合、ユーザーがスライダーをマウスオーバーしたらスライドショーを停止させます。
useCSS true tureの場合、スライドのアニメーションにCSS3 Transitionsを使います。使えない場合はfalseのときと同様の動きになります。
touch true trueの場合、スワイプでのスライド切り替えを有効にします。
video false trueの場合、CSS3 Transitionsによるアニメーションが無効になります。これはビデオ要素に対してCSS3 Transitionsで不具合が起きるためです。
controlNav true trueの場合、スライダーの数に合わせて増減する●ボタンを表示します。
directionNav true trueの場合、スライダーを操作する「次へ」「前へ」ボタンを表示します。
prevText Previous スライダーを操作する「前へ」ボタンのテキストを設定します。
nextText Next スライダーを操作する「次へ」ボタンのテキストを設定します。
keyboard true trueの場合、キーボードの左右矢印キーでスライドを操作することができます。
multipleKeyboard false trueの場合、キーボード操作によって複数のスライダーを操作することができます。1ページ中に複数のスライダーがある場合、この設定をtrueにしないとキーボード操作ができません。
mousewheel true trueの場合、マウスホイールでスライドを操作することができます。
pausePlay false trueの場合、スライドショーの再生/停止ボタンを作成します。
※デフォルトのCSSファイルにはこの機能に対するスタイルが設定されていないようです。
pauseText Pause 停止ボタンのテキストを設定します。
playText Play 再生ボタンのテキストを設定します。
controlsContainer ナビゲーション要素を指定したセレクタの要素に作成します。セレクタの指定はjQueryと同じ指定の仕方ができます。 
$(window).load(function(){
	$('.flexslider').flexslider({
		controlsContainer: '#hoge',
	});
});
manualControls オリジナルのコントロールボタンを作成することができます。このときスライドの数をボタンの数と一致させなければいけません。 
$(window).load(function(){
	$('.flexslider').flexslider({
		manualControls: '#hoge a',
	});
});


	1
	2
	3
	4
sync ここで指定したスライダーにこのスライダー上で実行されるアクションを反映させます。 
$(window).load(function(){
	$('#flexslider-cs').flexslider({
		sync: "#flexslider-carousel"
	});
});
asNavFor このスライダーを別のスライダーのサムネイルとして使う際に、ターゲットとなるスライダーを指定します。
※サムネイル付きのフリックスライダー（カルーセル）を参考にしてください。 
$(window).load(function(){
	$('#flexslider-carousel').flexslider({
		asNavFor: '#flexslider-cs',
	});
});
カルーセル
itemWidth 0 カルーセルの個々の項目のborderとpaddingを含んだ幅を設定します。
itemMargin 0 カルーセルの項目同士の間の余白を設定します。
minItems 0 表示される項目の最小数を設定します。項目の大きさはこの値を元に自動で変更されます。
maxItems 0 表示される項目の最大数を設定します。項目の大きさはこの値を元に自動で変更されます。
move 0 アニメーションで移動する項目の数を設定します。0の場合、表示されているすべての項目数分を移動します。

オプション

start function(){} 最初のスライダーのロードした時点で実行されます。
before function(){} スライドの切り替えアニメーション開始前に実行されます。
after function(){} スライドの切り替えアニメーション終了後に実行されます。
end function(){} 最後のスライドが表示された時点（アニメーション前）で実行されます。