横方向のスライダー「Scrollyeah」
当ページのリンクには広告が含まれています。
スポンサーリンク
横方向のスライダーを作成するプラグイン「Scrollyeah」を紹介します。
jQueryプラグイン「Scrollyeah」
このプラグインを使えば、クラス名を指定するだけで横方向のスライダーを簡単に作成することができます。
スライダーと言えば！画像ですが、横方向のdivボックスのスライダーなので、画像だけではなくさまざまなな用途に応用できます。
スポンサーリンク
デモの横方向のスライダーをご覧ください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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"/>
<style>
.item {
float: left;
margin: 0 8px;
}
</style>
</head>
<body>
<h1>Scrollyeah のデモでーす。</h1>
<p>下の画像を横方向にドラッグしてください。</p>
<div class="scrollyeah">
<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>
</div>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» Scrollyeah
スポンサーリンク