Syntax:

var slider = new SimpleSlide(element, [, options]);

Arguments:

1. element - id名。スライドしたい要素を囲む親要素。
2. options
   • separat - (number : default to 1) スライドしたい要素の区切り数
   • childTag - (tags : default to 'div') スライドしたい要素のタグ名
   • duration - (number : default to 1000) 移動速度
   • autoPlay - (boolean : default to true) 自動再生するかしないか
   • control - (boolean : default to true) コントローラーの表示・非表示
   • peri - (number : default to 8000) 表示してる時間
   • transition - (Fx.transitions 参照) トランジョン

memo

elementの親要素のwidthで移動を決めるので、サイズを決める場合はelementを括る親にoverflow:hiddenを。使いどころはやたら長いリストとかなんてどうでしょう？<li>をseparat:10とかでやるとか。

Ex:

xhtml

<div id="sliderW">
<div id="slider">
<div class="sliders">slide1</div>
<div class="sliders">slide2</div>
<div class="sliders">slide3</div>
<div class="sliders">slide4</div>
</div>
</div>

css

#sliderW{width:120px;overflow:hidden; position:relative;}
#pageNavi{position:absolute; bottom:0; right:0;}
.pages{display:inline-block; background:#000; margin-left:1px; padding:3px 5px; font-size:9px; line-height:1; text-align:center;}
.pages:link{color:#fff;}
.pages.selected{background:#c00;}

javascript

window.addEvent('domready', function(){
 var slider = new SimpleSlide('slider', {autoPlay:true})
});

sample

Download