私自身はあまり馴染みはなかったのですが、最近はどこのサイトも当たり前のようにjQueryが導入されており、使用する機会が増えてきました。
これを機に色々試しつつ勉強せねば、ということで、シンプルなスライダーのプラグインを作成してみました。
使い方
HTML＋JavaScript
</p>
<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>
<p>
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未満に抑えるのは難しいですね…。
テンプレートを使用しなければ削れそうですが、それにはもう少し勉強が必要なようです。
今後の課題にしたいと思います。