今日紹介するのは jQuery プラグインの[FlexSlider]です。
これ、かなり便利です。
レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもOK、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。
とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。
まずはサンプルをご覧ください。
【FlexSlider】→サンプルデモ
高機能ですが、その導入方法は比較的簡単です。
[FlexSlider]の導入方法
まずは以下のサイトから[FlexSlider]のプラグイン本体をダウンロードします。
続いて <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
- 2つのスライダーを同期させることができます。
- asNavFor
- サムネイルのナビゲーションを使うときに親スライダーと紐付けるときのオプション。親スライダーのセレクターを指定。
カルーセルに関するオプション
- itemWidth
- カルーセルを設定した際の画像1枚の幅。デフォルトは0です。
- itemMargin
- カルーセルの画像1枚のマージン。デフォルトは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について学ぶならコチラの書籍がオススメです。