Слайдер с автоматическим листанием

[d1am]

Всем доброго дня.
Прошу совета - мне нужно, чтобы слайды (элементы li из класса main-slider) листались автоматически после загрузки страницы и останавливались при наведении мыши.

Имеется кусок кода, в котором реализовано перелистывание по стрелкам по событию hover (он корректный, этот кусок я не пишу). Я ставлю действие, которое соответствует стрелке "вперед", на событие ready. Но получаю, что естественно, при запуске страницы я получаю однократное действие "слайд вперед".

Как я понимаю, моя задача сводится к бесконечному зацикливанию curindex++, с необходимостью прописать остановку по событию hover и снова запуск при отведении мыши. И тут я встал в ступор. Подскажите, куда копать, пожалуйста.

(function($){
 
$(document).ready(function(){
 
// НАЧАЛО: автоматическое перелистывание слайдов
$(".main-slider > li").ready(
 
    function () {
    
    var ul = $('.main-slider');
        var list = $('.main-slider li');
 
        var curindex = 0;
        var pos=[];
        list.each(function(){
            pos.push($(this).position().left);
        });
 
        var offset = ul.position().left*-1;
        
        for(var curindex=0;pos[curindex]<offset;curindex++);
 
        if(curindex<pos.length-3){
        
            curindex++;
            
        }else{
            ul.css('left' , -1* pos[pos.length-4]);
            list.eq(0).insertAfter(list.eq(list.length-1));
            ul.animate({left: -1* pos[pos.length-3]}, {queue: false});
        }
 
        ul.animate({'left':-1*pos[curindex]});
 
    return false;
    }
);  
// КОНЕЦ: автоматическое перелистывание слайдов
    
});
 
})(jQuery);

[Deff]

d1am,
Ну есть готовая демка, если желаете Слайд шоу на библиотеке jQuery

[d1am]

d1am,
Ну есть готовая демка, если желаете Слайд шоу на библиотеке jQuery

Спасибо! Но все-таки очень хочется допилить свой вариант
Когда ротируются не img, а списки <li> представляется больше возможностей, т.к. можно разместить и картинку и html-текст.

[d1am]

Немного продвинулся вперед, но опять наткнулся на сложность. Благодаря форуму понял, что для зацикленной анимации нужно использовать callback в animate - прописать в нем условие повторения.

Изменил строку

ul.animate({'left':-1*pos[curindex]});

. Добавил еще интервал.

Получил следующее:

setInterval(function() {
	      ul.animate({'left':-1*pos[curindex]}, 500, function() { 
		  
		// начало повторяющейся функции		
			curindex++;		
		// конец повторяющейся функции
		  });
	   }, 500)

Но в данном случае все слайды проходят один раз и останавливаются. Прописываю вместо

curindex++;

условие:

if(curindex<pos.length-3){ // в слайдере 3 блока
			curindex++;
}else{
			ul.css('left' , -1* pos[pos.length-4]);
			list.eq(0).insertAfter(list.eq(list.length-1));
			ul.animate({left: -1* pos[pos.length-3]}, {queue: false});
}

И тут спотыкаюсь - слайдер начинает некорректно листаться, когда приступает к выполнению "else" (после того как пролистал первые 3 блока). Эти вычисления писал не я, поэтому я в них не могу разобраться.
Буду рад, если кто-то подскажет.