jQuery の Cycle で画像でないスライドのスクロール切替スライドショー

jQuery の Cycle プラグインを使い、右から左へスクロールするアニメーションで切り替わるスライドショーにおいて、スライドに画像でない要素を使用するサンプル。右から左へスクロールするアニメーションで切り替えるようにするには、fx オプションに「scrollLeft」を指定する。

実装例（サンプル）

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

3つのスライドを、右から左へスクロールするアニメーションで、順番に表示する。

1つのスライドの表示時間は、５秒。

右から左へスクロールするアニメーション動作時間は、１秒。

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

読み込み

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

JavaScript

fx

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

右から左へスクロールするアニメーションにするには、「scrollHorz」を指定。

speed

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

1000ミリ秒を指定した。

timeout

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

5000ミリ秒を指定した。

sync

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

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

CSS

HTML

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