项目滑块不工作

我最近刚刚和类似的人一起练习。这就是我想到的，看看它是否有帮助：

http://jsfiddle.net/v3kLwh0o/

HTML:

<div class="slider-wrapper">
   <div class="arrows">
      <div class="left"><i class="fa fa-chevron-left fa-lg"></i></div>
      <div class="right"><i class="fa fa-chevron-right fa-lg"></i></div>
   </div>
   <ul class="slides">
      <li class="slide one"></li>
      <li class="slide two"></li>
      <li class="slide three"></li>
      <li class="slide one"></li>
   </ul>
</div>

CSS：

.slider-wrapper {
    margin: auto;
    margin-top: 50px;
    width: 720px;
    height: 400px;
    overflow: hidden;
    background-color: black;
}
.slider-wrapper > .slides {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 2880px; /* 720*4(pictures) */
    height: 400px;
}
.one { background-color: blue; }
.two { background-color: green; }
.three { background-color: red; }
.slider-wrapper > .slides .slide {
    width: 720px; /* 720px */
    height: 400px; /* 400px */
    float: left;
}
.slider-wrapper > .arrows {
    margin: 170px 0; /* (400-60[height of arrow container])/2 */
    position: absolute;
    width: 720px;
}
.slider-wrapper > .arrows > .left, .slider-wrapper > .arrows > .right {
    height: 60px;
    width: 50px;
    background-color: gray;
    padding: 20px 0; /* (60-20[height of arrow])/2 */
    color: white;
    text-align: center;
}
.slider-wrapper > .arrows > .left:hover, .slider-wrapper > .arrows > .right:hover {
    background-color: black;
    cursor: pointer;
}
.slider-wrapper > .arrows > .left { float: left; }
.slider-wrapper > .arrows > .right { float: right; }

JS:

// Set quantified variables
        var width = 720;
        var animationSpeed = 1000;
        var slideCount = 1;
        // Set variables to cache the DOM tree parts that are needed (makes performance faster since the program doesn't have to go through the entire tree everytime)
        var $leftArrow = $('.arrows > .left');
        var $rightArrow = $('.arrows > .right');
        var $slider = $('.slider-wrapper > .slides');
        var $slides = $slider.find('.slide');
        // Runs when the left arrow is clicked
        $leftArrow.click(function() {
            $slider.animate({'margin-left':'-='+width}, animationSpeed, function() {
                // After the animation ends, increase counter and check to see if its on the last image
                slideCount++;
                if (slideCount == $slides.length) {
                    slideCount = 1;
                    $slider.css('margin-left','0');
                }
                // console.log("Left: " + slideCount);
            });
        });
        // Runs when the right arrow is clicked
        $rightArrow.click(function() {
            // Check to see if slider is on the first image (which it is initially)
            // If it is, change the left margin of the slider to (number of images - 1) * width * -1 (i.e. margin-left of the last image)
            var firstImageCheck = function() {
                if (slideCount == 1) {
                    slideCount = $slides.length;
                    lastPicMargin = width * ($slides.length-1) * -1;
                    $slider.css('margin-left', lastPicMargin);
                }
            }
            firstImageCheck();
            $slider.animate({'margin-left':'+='+width}, animationSpeed, function() {
                // After the animation ends, decrease counter and check to see if its on the first image
                slideCount--;
                firstImageCheck();
                // console.log("Right: " + slideCount);
            });
        });