Javascript 简单箭头导航Jquery滑块的问题

我为自己构建了一个基本的Jquery滑块，但有一些问题。 自动滑动本身工作得很好，但当我尝试使用箭头导航时，例如左右切换，整个系统都不工作。我希望有人能理解

下面是

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();
        }
    });
}