数あるスライダー系のjQueryプラグインの中で、縦方向のスクロールに対応しているものは珍しく、探そうとしてもなかなか見つかりません。

今日はその悩みを解決する［jQuery Multirole Slider］の使い方を紹介します。

まずはサンプルをご覧ください。

縦スクロールにも対応［Multirole Slider］の実装サンプル

ご覧いただいたとおり動作も軽快でスルスル動きます。
導入も比較的簡単にできるのでオススメです。

［jQuery Multirole Slider］の実装方法

使用するファイル一式は「jQueryScript.net」からダウンロードできます。

jQuery Plugin For Simple Image Scroller – slider.js

使用するのは「slider.js」と「slider.css」の２つ。
さらに別途でjQueryの本体ファイルを読み込みます。

HTMLの <header>〜</header> 内に以下のようにコードを記述します。
今回はjQuery本体ファイルはGoogleのCDNにホストされているものを使います。

<link rel="stylesheet" href="slider.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="slider.js"></script>

続いてスライダー部分を作り込んでいきます。

各スライドには「slideCell」というクラス名を、それらを梱包する要素には「slideGuide」というクラス名を付与します。

<div class="slideFrame" id="sample">
	<ul class="slideGuide up">
		<li class="slideCell">
			<img src="1.jpg" alt="" width="300" height="300">
			Description 1
		</li>
		<li class="slideCell">
			<img src="2.jpg" alt="" width="300" height="300">
			Description 2
		</li>
		<li class="slideCell">
			<img src="3.jpg" alt="" width="300" height="300">
			Description 3
		</li>
		<li class="slideCell">
			<img src="4.jpg" alt="" width="300" height="300">
			Description 4
		</li>
		<li class="slideCell">
			<img src="5.jpg" alt="" width="300" height="300">
			Description 5
		</li>
	</ul>
</div>

さらに、スライダーを動かすための設定用のコードを記述します。

<script>
$(function(){
	$("#sample").slider({
		direction: "up"
	});
});
</script>

なお、すべての設定項目は以下のとおり。

<script>
$(function(){
	$("#demo").slider({
		loop: true, // 自動でループ
		time: 10, 
		speed: 1, 
		direction: "left", // 「up」「down」「left」「right」を選択可能
		reverse: true, // 逆再生
		auto: true, // 自動再生
		easing: "linear", // jQuery easing plugin に依存
		guideSelector: ".slideGuide", 
		cellSelector: ".slideCell",
		ctrlSelector: ".slideCtrl", 
		ctrlClick: false, // クリックでスクロール
		ctrlHover: true, // マウスオーバーでスクロール
		draggable: false, // ドラッグ対応
		dragCursorOpen: "open.cur", 
		dragCursorClose: "close.cur", 
		shuttle: false, 
		once: false, 
		restart: true,
		restartTime: 3000, 
		pause: true,
		build: true, 
		sp: 1 // 初期設定スピード
	});
});
</script>

ドラッグに対応したり、逆再生も可能だったりと、なかなか細かいところまで作り込まれています。
ぜひ試してみてはいかがでしょうか。

jQuery Plugin For Simple Image Scroller – slider.js