複数の画像がさまざまな効果で切り替わるスライドショー「Cycle2」
当ページのリンクには広告が含まれています。
スポンサーリンク
複数の画像がさまざまな効果で切り替わるスライドショーを実装するプラグイン「Cycle2」を紹介します。
jQueryプラグイン「Cycle2」
このプラグインを使えば、フェイド・スライド・スクロール……などのさまざまな効果で複数の画像がくるくると切り替わるスライドショーを実装することができます。
実装はクラス名「cycle-slideshow」以下に画像を指定するだけなので、簡単！
画像を切り替えるボタンも設置可能で、レスポンシブなので画像スライドショーのひとつの候補としていかがでしょうか。
スポンサーリンク
それではデモページの画像スライドショーをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Cycle2 のデモでーす。">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="jquery.cycle2.js"></script>
<style>
.cycle-slideshow img {
padding: 50px;
width: 300px;
}
</style>
</head>
<body>
<h1>Cycle2 のデモでーす。</h1>
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="1000"
>
<img src="images/01-red.png" />
<img src="images/02-orange.png" />
<img src="images/03-yellow.png" />
<img src="images/04-green.png" />
<img src="images/05-blue.png" />
<img src="images/06-indigo.png" />
</div>
<div class="cycle-slideshow">
<img src="images/07-purple.png" />
<img src="images/06-indigo.png" />
<img src="images/05-blue.png" />
<img src="images/04-green.png" />
<img src="images/03-yellow.png" />
<img src="images/02-orange.png" />
<img src="images/01-red.png" />
</div>
</body>
</html>
スポンサーリンク