今日の人気記事

  1. select要素の複数選択フォームを実装「Multiple Select」
  2. ページのトップへゆっくりとスクロール(戻る)「Scroll to Top Control」
  3. シングル・マルチセレクトに対応した選択要素「SumoSelect」
  4. 検索/ソート/ページャー/フィルター付きのテーブル「Bootgrid」
  5. jsファイルを非同期に遅延読み込み「Lazy Script」

横方向のスライダー「Scrollyeah」

スポンサーリンク

横方向のスライダーを作成するプラグイン「Scrollyeah」を紹介します。

jQueryプラグイン「Scrollyeah」

このプラグインを使えば、クラス名を指定するだけで横方向のスライダーを簡単に作成することができます。

スライダーと言えば!画像ですが、横方向のdivボックスのスライダーなので、画像だけではなくさまざまなな用途に応用できます。

スポンサーリンク

デモの横方向のスライダーをご覧ください。

「Scrollyeah」のデモ

ソース(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

スポンサーリンク

関連記事(一部広告含む)