横方向のスライダーを作成するプラグイン「Scrollyeah」を紹介します。
jQueryプラグイン「Scrollyeah」
このプラグインを使えば、クラス名を指定するだけで横方向のスライダーを簡単に作成することができます。
スライダーと言えば!画像ですが、横方向のdivボックスのスライダーなので、画像だけではなくさまざまなな用途に応用できます。
デモの横方向のスライダーをご覧ください。
「Scrollyeah」のデモ
ソース(HTML + jQuery)
<meta name="description" content="Scrollyeahのデモでーす。"> |
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> |
<script src="scrollyeah.js"></script> |
<link rel="stylesheet" href="scrollyeah.css"/> |
<h1>Scrollyeah のデモでーす。</h1> |
<p>下の画像を横方向にドラッグしてください。</p> |
<div class="item"><img src="images/red.png" /></div> |
<div class="item"><img src="images/orange.png" /></div> |
<div class="item"><img src="images/yellow.png" /></div> |
<div class="item"><img src="images/green.png" /></div> |
<div class="item"><img src="images/blue.png" /></div> |
<div class="item"><img src="images/indigo.png" /></div> |
<div class="item"><img src="images/purple.png" /></div> |
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Scrollyeah