当我在函数

Question

当我尝试console.log currentSlide时，我得到undefined。

增加后，我得到NaN。

我试过了parseFloat。

为什么这个变量不是数字？

JAVASCRIPT

//configuration
var pause = 3000;
var animationSpeed = 800;
var marginModifier = 400;
var currentSlide = 1;

//DOM cache
var $slider = $('#slider');
var $slidesContainer = $slider.find('#container');
var $slides = $slidesContainer.find("li")
console.log($slides.length);

//slider
setInterval(slide, pause);

function slide() {
    $slidesContainer.animate({'margin-left': '-='+ marginModifier}, animationSpeed, sliderLoop);

    function sliderLoop() {
        console.log(currentSlide);// <---------- HERE IS A PROBLEM
        currentSlide++;

        if (currentSlide === $slides.length) {
            $slidesContainer.css("margin-left", 0);
        }//end if
    }//end loop
}//end slide

HTML

<div id="slider">
    <ul id="container">
        <li><img src="https://d13yacurqjgara.cloudfront.net/users/11867/screenshots/552726/400x300.jpg" alt=""></li>
        <li><img src="https://d13yacurqjgara.cloudfront.net/users/31371/screenshots/269938/400x300.png" alt=""></li>
        <li><img src="http://images.myride.com/images/vehicle/2008/Dodge/Challenger/oem/08_Dodge_Challenger_SRT8_58_(400x300).jpg" alt=""></li>
        <li><img src="http://s3.amazonaws.com/bzzagent-bzzscapes-prod/mms-jpg--jpeg-image--400x300-pixels--lrg.png" alt=""></li>
    </ul>
</div>

CSS

#slider{
    overflow: hidden;
    width: 400px;
    height: 300px;
}
li{
    list-style: none;
    float: left;
}
#container{
    display: block;
    width: 1600px;
    height: 300px;
    margin: 0;
    padding: 0; 
}