Как остановить всю анимацию в этом слайдере карусели изображений, если стрелка не нажата?

Question

Карусель находится по адресу http://www.indicatorwarehouse.com/index-3-27-11.html

Владелец сайта хочет, чтобы слайдер изображений оставался неподвижным, пока кто-нибудь не нажмет на зеленые стрелки, а затем он будет перемещаться только один раз. Кроме того, он хочет, чтобы он скользил ОЧЕНЬ медленно, возможно, каждые 5 минут. Код для этого слайдера ниже ... пожалуйста, имейте в виду, я понятия не имею, что означает этот код, я новичок в js. Большое спасибо! :)

$(document).ready(function(){
    $('#sliderGallery').Slider();
});

(function($){
$.fn.Slider = function(params){
    var defaults = {
        moveLeft: true,
        onItem: false,
        isAnimating: false,
        timer: null
    },
    intialize = function(id){

/////////////////////////////////////////////////////////////
/////     Bind Hover Events on Left & Right Buttons     /////
/////////////////////////////////////////////////////////////
        $('div#leftButton').hover(function(){
            $(this).addClass('leftImageHov');
            clearInterval(defaults.timer);
        },function(){
            $(this).removeClass('leftImageHov');
            setTimer();
        });
        $('div#rightButton').hover(function(){
            $(this).addClass('rightImageHov');
            clearInterval(defaults.timer);
        },function(){
            $(this).removeClass('rightImageHov');
            setTimer();
        });

/////////////////////////////////////////////////////////////
/////         Stop Animation on Hovering Items          /////
/////////////////////////////////////////////////////////////
        $('#canvas ul li').hover(function(){
            clearInterval(defaults.timer);
        },function(){
            setTimer();
        });

/////////////////////////////////////////////////////////////
/////        Get Size of the #Canvas ul & Set It        /////
/////////////////////////////////////////////////////////////
        var li = $('#canvas ul li');
        var liWidth = li.eq(0).width();
        var liCount = li.length;
        $('#canvas ul').css({width: liWidth*liCount + 'px', left: '0px'});

/////////////////////////////////////////////////////////////
/////    Bind Click Event on the Left & Right Buttons   /////
/////////////////////////////////////////////////////////////   
        var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        $('div#leftButton').click(function(){
            if(!defaults.isAnimating)
                Animate(liWidth, 600, leftLimit);
        });
        $('div#rightButton').click(function(){
            if(!defaults.isAnimating)
                Animate((-1*liWidth), 600, leftLimit);
        }); 

        setTimer();
    },
    setTimer = function(){
        defaults.timer = setInterval(doAnimation, 30000 );      
    },
    Animate = function(amount, time, leftLimit){
        defaults.isAnimating = true;
        var leftVal = $('div#canvas ul').css('left');
        leftVal = leftVal.replace('px','');
        leftVal = leftVal*1;
        amount += leftVal;

/////////////////////////////////////////////////////////////
/////                    Range Check                    /////
/////////////////////////////////////////////////////////////   
        if(amount < (-1*leftLimit)) { amount = (-1*leftLimit); defaults.moveLeft = false; }
        if(amount > 0) { amount = 0; defaults.moveLeft = true; }

        $('div#canvas ul').animate({
            left: amount
        }, time, function() { defaults.isAnimating=false; });
    },

/////////////////////////////////////////////////////////////
/////                     Animation                     /////
/////////////////////////////////////////////////////////////
    doAnimation = function(){
        var li = $('#canvas ul li');
        var liWidth = li.eq(0).width();
        var liCount = li.length;
        var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        var animValue = liWidth*3;
        if(defaults.moveLeft) animValue *= -1;
        else animValue = leftLimit;
        Animate(animValue, 0, leftLimit);  
    }

    return this.each(function(){
        intialize(this);
    });
}
})(jQuery);

Answer 1

Чтобы скользить по очереди, попробуйте изменить это:

var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        $('div#leftButton').click(function(){
            if(!defaults.isAnimating)
                Animate(liWidth, 600, leftLimit);
        });
        $('div#rightButton').click(function(){
            if(!defaults.isAnimating)
                Animate((-1*liWidth), 600, leftLimit);
        }); 

с этим:

var leftLimit = (liWidth*liCount) - $('div#canvas').width();
        $('div#leftButton').click(function(){
            if(!defaults.isAnimating)
                Animate(liWidth, 100, leftLimit);
        });
        $('div#rightButton').click(function(){
            if(!defaults.isAnimating)
                Animate((-1*liWidth), 100, leftLimit);
        }); 

Answer 2

carousel.stop(true)

это работает .. попробуйте один раз

Answer 3

Чтобы установить анимацию слайда каждые 5 минут, измените:

setTimer = function(){
        defaults.timer = setInterval(doAnimation, 30000 );      
    },

до

setTimer = function(){
        defaults.timer = setInterval(doAnimation, 150000 );      
    },