【TIPS】「FlexSlider」を使用して複数の画像をスライドショーさせる
「FlexSlider」を使用して複数の画像をスライドショーさせる手順をまとめておきます。
「FlexSlider」を設置する際に行なう作業は、以下の三箇所です。
以下、細かい部分の説明になります。
まずは、head内にJQuery本体のコードである以下を記述。そのままコピペでOK。
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
次に、以下の外部サイトからダウンロードした各ファイルを読み込む。
http://flexslider.woothemes.com/
htmlソースは以下のように記述。
同じくhtmlのhead内に以下のスクリプトを記述する。
次に、body内にあるスライドショーをさせたい要素に「flexslider」というクラス名を設定。
以上で完成。
スタイルがデフォルトなので、デザインを変更する際はCSSで調整していく。
また捕捉として、以下のようなカスタマイズも可能。
animation ‥‥ スライドの種類の設定。「fade」か「slide」で指定。
direction ‥‥ スライドの方向を設定。横の場合「horizontal」、縦の場合「vertical」で指定。
reverse ‥‥ 逆方向にスライドさせる場合は「true」を指定。
animationLoop ‥‥ スライドをループさせるかを設定。ループさせない場合は「false」を指定。
slideshow ‥‥ 自動でスライドショーを行うかを設定。手動にする場合は「false」を指定。
slideshowSpeed ‥‥ スライドショーのスピード(間隔)を設定。
animationspeed ‥‥ アニメーションのスピードを設定。
randomize ‥‥ ランダムでスライドショーをさせる場合は「true」で設定。
controlNav ‥‥ ページャを表示するかを設定。表示しない場合は「false」を指定。
directionNav ‥‥ 次へと前へのナビゲーションを表示するかを設定。表示しない場合は「false」
を指定。
prevText ‥‥ 前へナビゲーションのテキストを指定。
nextText ‥‥ 次へナビゲーションのテキストを指定。 等など。