简单箭头导航Jquery Slider的问题

Question

我为自己构建了一个基本的Jquery Slider，并且遇到了一些问题。 自动幻灯片本身运行良好，但是当我尝试使用箭头导航时，例如左右切换，整个系统都不起作用。我希望有人能理解它。

这是index.html：

 <div id="slider">
    <div id="no">
    <div class="slide active-slide" id="slide1"></div>
    <div class="slide" id="slide2"></div>
    <div class="slide" id="slide3"></div>
    <div class="slide" id="slide4"></div>
    </div>
<div id="arrow-left" class="btn"><</div>
<div id="arrow-right" class="btn">></div>
<div id="loader"><div id="bar"></div></div>
</div>

脚本：

$('#slider').hover(function(){
$('.btn').fadeIn(300);

}, function(){
$('.btn').fadeOut(300);

});
startSlide();

function startSlide() {

    var currentSlide = $('.active-slide')

    $('#bar').css('width', '0');
    $('#bar').animate({width:'100%'}, 4000, function(){
    if($('.active-slide').next().hasClass('slide')) {
        $('.active-slide').removeClass('active-slide').next().addClass('active-slide');
        startSlide();
    } else {

        $('.active-slide').removeClass('active-slide');
        $('.slide').first().addClass('active-slide');
        startSlide();       
    }

    });

    $('#arrow-right').click(function(){
        $('#bar').stop();

        if($('.active-slide').next().hasClass('slide')) {
                $('.active-slide').removeClass('active-slide').next().addClass('active-slide');
                startSlide();
        } else {
            $('.active-slide').removeClass('active-slide');
            $('.slide').first().addClass('active-slide');
            startSlide();
        }

    });

    $('#arrow-left').click(function(){
        $('#bar').stop();

        if($('.active-slide').prev().hasClass('slide')) {
                currentSlide.removeClass('active-slide');
                currentSlide.prev().addClass('active-slide');
                startSlide();
        } else {
            currentSlide.removeClass('active-slide');
            $('.slide').last().addClass('active-slide');
            startSlide();
        }
    });
}