私自身はあまり馴染みはなかったのですが、最近はどこのサイトも当たり前のようにjQueryが導入されており、使用する機会が増えてきました。
これを機に色々試しつつ勉強せねば、ということで、シンプルなスライダーのプラグインを作成してみました。

使い方

HTML+JavaScript

<div id="slider00">
	<ul>
		<li style="background-color:#FFF;">ああああああ</li>
		<li style="background-color:#EEE;">いいいいいい</li>
		<li style="background-color:#DDD;">うううううう</li>
		<li style="background-color:#CCC;">ええええええ</li>
		<li style="background-color:#BBB;">おおおおおお</li>
	</ul>
</div>

<div id="slider01"></div>
<div><a href="javascript:void(0);" id="slide01Prev">←prev</a> <a href="javascript:void(0);" id="slide01Next">next→</a></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.slider.min.js"></script>
<script>
$(function(){
	$('#slider00').slider(); //$(id).slider(options);

	$('#slider01').slider({
		'duration' : 4000
		,'speed' : 'slow'
		,'auto' : false
		,'data' : [
			'ああああああ'
			,'いいいいいい'
			,'うううううう'
			,'ええええええ'
			,'おおおおおお'
		]
		,'action': {
			'prev' : '#slide01Prev',
			'next' : '#slide01Next'
		}
	});
});
</script>

options (object) で設定できる項目

  • duration:自動で切り替わる時間の設定(ms)
  • speed:切り替わりにかかる時間の設定(ms or ‘slow’ ‘normal’ ‘fast’)
  • vector:スクロール方向の設定(’left’ or ‘top’)
  • auto:自動切り替えの on off(boolean)
  • data:アイテム(li)内のコンテンツを設定(array)
  • action:スクロールアクションの割り当て(object)

より詳細な利用方法はサンプルからご確認ください。

参考にさせていただいたサイト

何から手をつけていいのか分からずググったところ、ギンペイさん(@ginpei_jp)のブログを発見。 順序立てて説明されているので、非常にわかりやすかったです。

既存のjsを移行する場合に便利だと思います。 今回はこちらの最新版を使用させていただきました。


極力サイズが大きくならないようにしましたが、1KB未満に抑えるのは難しいですね…。
テンプレートを使用しなければ削れそうですが、それにはもう少し勉強が必要なようです。
今後の課題にしたいと思います。