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