jQuery の Cycle で、次にも前にも切り替えられるスライドショー

jQuery の Cycle プラグインを使い、フェードイン・フェードアウトのアニメーションで切り替わるスライドショーにおいて、リンク要素をクリックすることで、次のスライド画像にも、前のスライド画像にも、切り替えられるようにする方法。フェードイン・フェードアウトのアニメーションで切り替えるようにするには、fx オプションに「fade」を指定する。次のスライド画像にも、前のスライド画像にも、切り替えられるようにするには、next オプションと prev オプションを使う。

実装例（サンプル）

実装例（サンプル）の動作について

「>>」をクリックすると、フェードイン・フェードアウトのアニメーションで、次の画像へ進む。

「<<」をクリックすると、フェードイン・フェードアウトのアニメーションで、前の画像へ戻る。

フェードイン・フェードアウトのアニメーション動作時間は、１秒。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

JavaScript

fx

スライドが切り替わるアニメーションの種類を指定するオプション。

フェードイン・フェードアウトのアニメーションにするには、「fade」を指定。

speed

スライドが切り替わるアニメーション動作速度を指定するオプション。

1000ミリ秒を指定した。

timeout

スライド1つ1つの表示時間を指定するオプション。

0ミリ秒を指定すると、自動では切り替わらない。

sync

消えるアニメーションと現れるアニメーションを同時に実行するか指定するオプション。

「1」を指定すると、表示中のスライドが消えるアニメーション中に、次のスライドを表示するアニメーションが始まる。

next

次のスライドへ移るトリガーとなる要素を指定するオプション。

prev

前のスライドへ移るトリガーとなる要素を指定するオプション。

CSS

HTML

パスは、それぞれ、画像ファイルの場所を指定する。