私自身はあまり馴染みはなかったのですが、最近はどこのサイトも当たり前のように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未満に抑えるのは難しいですね…。
テンプレートを使用しなければ削れそうですが、それにはもう少し勉強が必要なようです。
今後の課題にしたいと思います。