Debugging why I can't slide thumbnails left or right

I am working on this demo. Why am I not able to slide the thumbnails to left or right?

What I was trying to do is sliding one thumbnail on each click until to get the last thumb at the galley

Here is the code that I have:

$(document).ready(function(){ 
    
    // Gallery
    if(jQuery("#gallery").length){
        
        // Declare variables
        var totalImages = jQuery(".gallery > li").length, 
            imageWidth = jQuery(".gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery(".gallery").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);
            
        jQuery("#gallery").width(totalWidth);
        
        jQuery("#gallery-prev").click(function(){
            if(jQuery(".allery").position().left < 0 && !jQuery(".gallery").is(":animated")){
                jQuery(".gallery").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });
        
        jQuery("#gallery-next").click(function(){
            if(jQuery(".gallery").position().left > stopPosition && !jQuery(".gallery").is(":animated")){
                jQuery(".gallery").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }
        
});

It is because you have a lot of type errors in javascript. I've found few errors and corrected them. Please try this:

$(document).ready(function() { 

    // Gallery
    if($(".gallery").length) {

        // Declare variables
        var totalImages = jQuery(".gallery > ul > li").length, 
            imageWidth = jQuery(".gallery > ul > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery(".gallery").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth) + imageWidth;
        jQuery(".gallery").width(visibleWidth);    
        jQuery(".gallery > ul").width(totalWidth);

        jQuery("#gallery-prev").click(function() {
            if(jQuery(".gallery > ul > li").position().left < 0 && !jQuery(".gallery").is(":animated")) {
                jQuery(".gallery > ul > li").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });

        jQuery("#gallery-next").click(function() {
            if(jQuery(".gallery > ul > li:first").position().left > stopPosition && !jQuery(".gallery").is(":animated")) {
                jQuery(".gallery > ul > li").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }

});

And css:

.gallery > ul {
    overflow-x: hidden;    
    width: 3000px;
}
.col-sm-3 {
    width:265px;   
}

Link to jsfiddle: http://jsfiddle.net/52VtD/2603/