jQuery Sliding Feature Base (Not Working?)

by Travis

HTML

<div id="projFeat">
    <div id="projFeatSlider">
        <img src="http://placehold.it/940x400" />
        <img src="http://placehold.it/940x400" />
        <img src="http://placehold.it/940x400" />
        <img src="http://placehold.it/940x400" />    
    </div>            
</div>

<ul id="projFeatControls">
    <li><a id="projFeatPrev">&lt;</a></li>
    <li><a id="projFeatNext">&gt;</a></li>
</ul>

CSS

#projFeat {width:940px; height:400px; margin:0px auto 40px auto; background:#FFFFFF; border:1px solid #cccccc; border-radius:4px; box-shadow:0px 0px 8px #ccc; position:relative; overflow:hidden;}
#projFeatSlider {width:100%; position:absolute; top:0px; left:0px;}
#projFeat img {float:left;}

#projFeatControls {margin:10px auto 40px auto; overflow:hidden;}
#projFeatControls li {float:left;}
#projFeatControls li a {cursor:pointer;}

JavaScript

$(document).ready(function(){
    
    // Set the default for images
    var counter = 1;
    
    // Find the amount of images & store a value
    var sliderSize = $('#projFeatSlider img').size();
    
    // Take the amount of images and multiply that number by 940px
    var sliderWidth = sliderSize * 940;
    
    // Set the width of the slider div
    $('#projFeatSlider').width(sliderWidth);
    
    // Animate to previous slide
    $('#projFeatPrev').click(function(){
        if (counter > 1 && counter <= sliderSize) {
            $('#projFeatSlider').animate({
                left: '+=940'
            }, 300);
            counter--;
        } else {
            $('#projFeatSlider').animate({
                left: -sliderWidth + 940
            }, 300);
            counter = sliderSize;
        }
    });
    
    // Animate to next slide
    $('#projFeatNext').click(function(){
        if (counter < sliderSize) {
            $('#projFeatSlider').animate({
                left: '-=940'
            }, 300);
            counter++;
        } else {
            $('#projFeatSlider').animate({
                left: '0'
            }, 300);
            counter = 1;
        }
    });
});