Javascript jQuery英雄滑块来回移动

我尝试使用javascript为英雄标题制作一个小幻灯片。 它应该向上滑动到最后一张图像，然后向相反方向向后滑动。 这是可行的，但前提是所有三个持续时间数字完全相同

有人知道为什么或者我可以改变什么吗

$(document).ready(function(){

var slider = $("#hero-slider");
var slides = slider.find(".hero-slides");
var sliderWidth = $("#hero-slider").width();
var slideCount = $(".hero-slide").length;
var currentSlide = 1;

setInterval(function() {
    if(currentSlide === 1){
        slides.animate({
        "margin-left": "-=" + sliderWidth
    }, 2000, function(){
        currentSlide++;
    });
    } else if(currentSlide === slideCount) {
        slides.animate({
        "margin-left": "+=" + sliderWidth
    }, 2000, function(){
        currentSlide--;
    });
    };
}, 2000);
});

-

<div id="hero-slider">
    <ul class="hero-slides">
        <li class="hero-slide"><img src="img/slide-1.jpg"></li>
        <li class="hero-slide"><img src="img/slide-2.jpg"></li>
        <li class="hero-slide"><img src="img/slide-3.jpg"></li>
    </ul>
</div>