[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);