function slider(){
var container = $('slidecontainer'); //элемент в котором лежит слайдер
if (container){
var slides = container.getElement('div'),
slideDuration = 5000, //задержка между слайдами
count = 5, //количество слайдов если они лежат отдельными блоками то можно автоматически определить например conteiner.getElements('li').length();
current = 0, //стартовый слайд
interval, //переменная для хранения таймера
step = 280, //это тоже можно автоматом определять (длина одного слайда)
block = false, //блокировка кнопок на время анимации
w = step*count; //общая длина слайда
container.fx = new Fx.Morph(slides, {duration: 500, transition: Fx.Transitions.Cubic.easeOut, wait: false, 'onComplete' : function(){block = false;}}).set({'margin-left' : 0});
var show = function(v) {
if (block){
return;
}
block = true;
current += v || 1;
if (current >= count){
current = 0;
}
if (current < 0){
current = count-1;
}
container.fx.start({'margin-left' : -step*current});
};
container.next = function(){
show();
};
container.prev = function(){
show(-1);
};
container.nav = function(i){
current = i;
show(0);
};
interval = show.periodical(slideDuration);
}
}
запускается слайдер просто
window.addEvent('domready', function(){slider()});
Вариант с кнопками навигации получается из этого тоже просто
$('#nav-btn-left').addEvent('click', function(){container.prev()})
$('#nav-btn-right').addEvent('click', function(){container.next()})
вот HTML - который можно сделать обычным модулем (чтобы потом легко редактировать)
<ul id="slidecontainer" class="slider">
<li style="width: 940px; "><img src="/images/slider/image-6.jpg">
<div class="text"></div>
</li>
<li style="width: 940px; "><img src="/images/slider/image-1.jpg">
<div class="text"></div>
</li>
<li style="width: 940px; "><img src="/images/slider/image-2.jpg">
<div class="text"></div>
</li>
<li style="width: 940px; "><img src="/images/slider/image-3.jpg">
<div class="text"></div>
</li>
<li style="width: 940px; "><img src="/images/slider/image-4.jpg">
<div class="text"></div>
</li>
<li style="width: 940px; "><img src="/images/slider/image-5.jpg">
<div class="text"></div>
</li>
</ul>