jQuery Cycle Pluginの使い方
jQuery Cycle Pluginの使用方法をご紹介します。
jQuery Cycle Pluginは様々な効果でスライドショーを簡単に実装できるjQueryライブラリです。
- ※ このライブラリは、jQueryが別途必要です。
ダウンロードと設置
こちらからダウンロードします。
ダウンロードしたJavaScriptファイルを任意の場所に設置します。
JavaScriptの読み込み
任意の場所に設置したjQueryとjQuery Cycle PluginのJavaScriptファイルを読み込みます。
パスは環境に応じて変更してください。
HTML
適用方法
スライドショーにしたい画像をdiv要素などで囲ったHTMLを用意します。
HTML
$(個々のスライドがある親要素のセレクター).cycle();のようにJavaScriptのコードを書きます。
この時点で先ほどのHTMLに対してスライドショーの動きが適用されます。
JavaScript
デモ
オプションの設定
jQuery Cycle Pluginには様々なオプションが用意されています。
$(...).cycle({ オプション });のように第一引数にオプションの内容をハッシュ（連想配列）で指定します。
JavaScript
その他のオプションの内容は こちら をご覧ください。
デモ
ページネーションの設置方法
対象の画像（スライド）を瞬時に移動可能にするページネーションを設置する方法をご紹介します。
HTMLにページネーションを設置したい箇所に要素を1つ用意します。
（用意した要素の中にページネーションが出力されます。）
HTML
オプションのpagerにページネーションを設置する先のセレクターを指定します。
JavaScript
デモ
出力されるHTML
出力されるページネーションは次のようなHTMLです。
HTML
オプション
- ※ 一部のオプションのみ説明しています。
| オプション名 | 初期値 | 説明 |
|---|---|---|
| fx | fade | 次のスライドに切り替わるアニメーション効果です。 効果の一覧は こちら をご覧ください。 |
| timeout | 4000 | 次のスライドに切り替わるまでの待機時間です。 ミリ秒で指定します。0を指定すると無効になります。 |
| timeoutFn | null | 次のスライドに切り替わるまでの待機時間を条件に応じて変更可能にします。関数で指定しreturnで待機時間を返します。 |
| continuous | 0 | 切り替わる時間を無視し、次のスライドに切り替えます。1にすることにより有効になります。 |
| speed | 1000 | 切り替え効果の速度を変更します。 ミリ秒で指定します。 |
| speedIn | null | インする切り替え効果の速度を変更します。 ミリ秒で指定します。 |
| speedOut | null | アウトする切り替え効果の速度を変更します。 ミリ秒で指定します。 |
| next | null | 次のスライドに移動するボタンの要素（セレクター）を設定します。オプションの「timeout」を0に設定した状態で指定します。 |
| prev | null | 前のスライドに移動するボタンの要素（セレクター）を設定します。オプションの「timeout」を0に設定した状態で指定します。 |
| prevNextClick | null | nextまたはprevの移動ボタンを押した際のコールバック関数です。 押した瞬間に実行されます。 第一引数：次のスライドへ移動の場合はtrue、前のスライドへ移動の場合はfalse 第二引数：次のスライドのインデックス番号 第三引数：次のスライドの要素 |
| pager | null | ページャー機能を出力する要素名やID名、class名の指定をします。デフォルトでは数値のナビゲーションが出力されます。 |
| activePagerClass | 'activeSlide' | ページャーのアクティブになっている番号へのクラス名です。 |
| pagerClick | null | ページャーを押した際のコールバック関数です。 押した瞬間に実行されます。 第一引数：次のスライドのインデックス番号 第三引数：次のスライドの要素 |
| pagerEvent | click | ページャー機能でスライドを切り替える時のマウスアクション（トリガー）を指定します。clickやmouseoverなどが指定でき、デフォルトはclickが指定されています。 |
| pagerAnchorBuilder | null | ページャー機能のユーザー定義関数です。詳しくはこちらをご覧ください。 |
| pauseOnPagerHover | 0 | ページャーにマウスカーソルをのせた場合に停止するかの設定を行います。trueを設定することにより有効になります。 |
| before | null | 次のスライドに移動する前のコールバック関数です。 $.(...).cycle(...)を実行した直後にも実行されます。 第一引数：現在のスライドの要素 第二引数：次のスライドの要素 第三引数：設定されているオプション 第四引数：次のスライドへ移動の場合はtrue、前のスライドへ移動の場合はfalse |
| after | null | 次のスライドに移動した後のコールバック関数です。 $.(...).cycle(...)を実行した直後にも実行されます。 第一引数：現在のスライドの要素 第二引数：次のスライドの要素 第三引数：設定されているオプション 第四引数：次のスライドへ移動の場合はtrue、前のスライドへ移動の場合はfalse |
| end | null | 最後のスライドに達した後のコールバック関数です。 第一引数：設定されているオプション |
| easing | null | 動きの加減速の種類を指定します。 jQueryのeasingを指定します。 linear、swing以外はeasing pluginが必要です。 |
| shuffle | null | fxオプションがshuffleの時に移動先を指定します。{ top : 20, left : 30 }のように指定します。 |
| startingSlide | 0 | 最初に表示するスライドを設定します。 0から始まるインデックス番号を指定します。 （2を設定した場合、3枚目の画像を最初に表示します。） |
| random | 0 | スライドをランダムに切り替えます。 0で無効、1で有効になります。 |
| pause | 0 | スライドにマウスをのせるとスライドが停止します。1にすることにより有効になります。 |
| autostop | 0 | スライドが終端に到達した際の繰り返しを停止するかどうかを設定します。 有効にする場合は1を指定します。 |
| autostopCount | 0 | スライドを何回繰り返すかの指定をします。 |
| delay | 0 | 最初のスライド効果が始まるまでの時間を指定します。 ミリ秒で指定します。 |
その他のオプションは公式サイトをご覧ください。
効果一覧
パソコンのスペックや回線環境により動作が重くなる場合があります。
blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
none
scrollUp
scrollDown
scrollLeft
scrollRight
scrollHorz
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom
all