Slide thumbnails using left and right arrows

Slide thumbnails using left and right arrows

Hi,

I'm trying to make a thumbnail slider that has a left and right arrow for sliding in a new set of thumbnails. I'm new to jQuery and javascript so I may be missing something obvious, but I can't figure out what's wrong with my code. When I click on the arrows, nothing happens. I might be in over my head, because I have no idea where to start fixing the problem.

I would appreciate any and all help, please! Thank you.

Here's the jQuery:

$(function arrows() {
   var clusterSize = $(".thumb_cluster").length; // determine the number of clusters
   var current = 1;  // set the initial cluster as cluster1

   $("#right_arrow").click( function(current, next, clusterSize){
         var next = current + 1; // determine the next cluster of thumbs to be shown, which will slide in

         // first, fade and slide current thumb cluster out. then, place current cluster offscreen with full opacity.
         $("#cluster" + current).animate({opacity: 0,left:"800px"}, 400, function(){
                                                               $(this).css({right:"-3000px",opacity:1});
                                                               });
         // determine which thumb cluster will slide in
         if($(".thumb_cluster").length > current){  //if the last thumb cluster is not currently selected, slide in the next cluster
            $("#cluster" + next).animate({left:"100px"},400);
         }
         else{ //else, slide in the first cluster
            var next = 1;
            $("#cluster" + next).animate({left:"100px"},400);
         }

         var current = next; // set the new value for current
   });

   $("#left_arrow").click( function(current, next, clusterSize){
         var next = current - 1; // determine the next cluster of thumbs to be shown, which will slide in

         // first, fade and slide current thumb cluster out. then, place current cluster offscreen with full opacity.
         $("#cluster" + current).animate({opacity: 0,right:"800px"}, 400, function(){
                                                               $(this).css({left:"-3000px",opacity:1});
                                                               });
         // determine which thumb cluster will slide in
         if(current > 1){  //if the first thumb cluster is not currently selected, slide in the next cluster
            $("#cluster" + next).animate({left:"100px"},400);
         }
         else{ //else, slide in the last cluster
            var next = clusterSize;
            $("#cluster" + next).animate({left:"100px"},400);
         }
         
         var current = next; // set the new value for current
   });

});



Here's some sample HTML:

   
<div id="thumbs">
   <img src="images/left_arrow.png" id="left_arrow">
   <div class="thumb_cluster" id="cluster1">
            <img src='/exhibition_1/piece_thumbs/GCaldwellAugurweb.jpg' alt='The Augur' class='piece_thumb'/>
            <img src='/exhibition_1/piece_thumbs/GCaldwellAugurdetweb.jpg' alt='The Augur' class='piece_thumb'/>
            <img src='/exhibition_1/piece_thumbs/GCaldwellteethsmallweb.jpg' alt='Twenty-two teeth' class='piece_thumb'/>
            <img src='/exhibition_/piece_thumbs/ADymond2small.jpg' alt='I’m Pretty Sure That Bruce Wayne is Batman' class='piece_thumb'/>
        </div>

        <div class='thumb_cluster' id='cluster2'>
             <img src='/exhibition_1/piece_thumbs/ADymondbrucesmallweb.jpg' alt='I’m Pretty Sure That Bruce Wayne is Batman' class='piece_thumb'/>
             <img src='/exhibition_1/piece_thumbs/ZFriedphone2smallweb.jpg' alt='Untitled' class='piece_thumb'/>
             <img src='/exhibition_1/piece_thumbs/ZFriedGoodsmallweb.jpg' alt='It’s Good Sometimes' class='piece_thumb'/>
             <img src='/exhibition_1/piece_thumbs/ZFriedSauvageweb.jpg' alt='Untitled (Triptych Sauvage)' class='piece_thumb'/>
             <img src='/exhibition_1/piece_thumbs/CJonesblindsmallweb.jpg' alt='Double Blind' class='piece_thumb'/>
        </div>
    <img src="images/right_arrow.png" id="right_arrow">
</div>


Here's the CSS:

#thumbs {
   margin: 10px auto;
   height: 64px;
   padding: 10px;
   width: 860px;
   position:relative;
   overflow:visible;
}
#left_arrow {
   float: left;
}
#right_arrow {
   float: right;
}
.thumb_cluster{
   position:absolute;
   top:0;
   left:-3000px;
   width: 715px;
}
#cluster1{
left: 100px;
}