コンテンツスライダーを実装できる380バイトほどの超軽量なjQueryプラグイン

Ads

シンプルで良さそうだったので
メモ。コンテンツをスライドさせ
る事が出来る、380バイト程度
の軽量なスクリプトです。軽い
ですな、これは・・使い勝手も
良さそうです。

シンプルなスクリプトですがとにかく軽量ですね。

Lightest jquery content slider ever – 380 bytes

jquery-slider01
div要素ごとスライドさせる軽量コンテンツスライダーです。コードはほんの数行で済むみたい。

$(document).ready(function (){
	$('#button a').click(function(){
		var integer = $(this).attr('rel');
		$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
		$('#button a').each(function(){
		$(this).removeClass('active');
			if($(this).hasClass('button'+integer)){
				$(this).addClass('active')}
		});
	});	
});

IE6でも動作はしました。リンク部分のcss調整は必要ですがスムーズにスライドします。わずか380バイト程度の軽量スクリプト、クロスブラウザでシンプルなので、なかなか使い勝手も良さそう。

動作にはjQueryが必要です。cssとhtmlのマークアップは以下からご確認ください。

Lightest jquery content slider ever – 380 bytes