How do I get my thumbnails to scroll left and right on click with jquery?
<p>So here is all of my code for my slideshow and everything works except the thumbnails moving left to right on mouse click of <code>#slideshow-thumbs-prev</code> and <code>#slideshow-thumbs-next</code>.</p>

<p>I am new at jquery so please be as descriptive as possible. Let me know whats going on here if I am missing something or the code isn't labeled correctly to my html. Thanks</p>

<pre><code> &lt;script type="text/javascript"&gt;

var index = 0;

$(document).ready(function(){
function next() {
    index++;
    if ( index &gt; 11 ) {
        index = 0;
    } // end if 
    show_slide();
} // end next()

function prev() {
    index--;
    if ( index &lt; 0 ) {
        index = 11;
    } // end if
    show_slide();
} // end prev()


$("#slideshow-thumbs-next").click(function(){
    index ++;
    if ( index &gt; 11 ) {
        index = 0;
    }           
    var position = $('#slidesthumbnails&gt;div').eq(index).position();
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'});
});

$("#slideshow-thumbs-prev").click(function(){
    index --;
    if ( index &gt; 0 ) {
        index = 11;
    }           
    var position = $('#slidesthumbnails&gt;div').eq(index).position();
    $('#slidesthumbnails').animate({left:-position.left+'px',top:-position.top+'px'});
});

function show_slide() {
    $("#slideshow-container&gt;.slideshow-stage&gt;img").eq(index).fadeIn(500).siblings().fadeOut(500);
    $("#slide-caption-box&gt;.slide-caption&gt;div").eq(index).fadeIn(500).siblings().fadeOut(500);
    //highlight thumbnail
    $("#thumbnails-container&gt;#thumbnails-wrapper&gt;#slidesthumbnails&gt;.thumbnails").removeClass("selected").eq(index).addClass("selected");
}

$(function() {
    $( "#slideshow-container&gt;.slideshow-stage&gt;img" ).aeImageResize({ height: 476, width: 680 });
});

    $("#slideshow-container&gt;.slideshow-stage&gt;img").eq(0).siblings().hide();
    $("#slide-caption-box&gt;.slide-caption&gt;div").eq(0).siblings().hide();

    $("#thumbnails-container&gt;#thumbnails-wrapper&gt;#slidesthumbnails&gt;.thumbnails").click(function(){
        var index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        $("#slideshow-container&gt;.slideshow-stage&gt;img").eq(index).fadeIn(500).siblings().fadeOut(500);
        $("#slide-caption-box&gt;.slide-caption&gt;div").eq(index).fadeIn(500).siblings().fadeOut(500);       
    });

    //click functions,
    $("#slideshow-container&gt;.slideshow-stage&gt;.slideshow-next").click(function(){
        index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        show_slide();
    });

    $("#thumbnails-container&gt;#thumbnails-wrapper&gt;#slidesthumbnails&gt;.thumbnails").click(function(){
        index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        show_slide();

    });

            $("#slideshow-next").click( next );
            $("#slideshow-prev").click( prev );

            $("#slideshow-thumbs-next").click( next );
            $("#slideshow-thumbs-prev").click( prev );


    $(function() {           
    $("#thumbnails-container&gt;#thumbnails-wrapper&gt;#slidesthumbnails&gt;.thumbnails").mouseover(function (event) {
        $(this).siblings().stop().animate({opacity: 0.4}, 200);       
        $(this).stop().animate({opacity: 1.0}, 200); 
        event.stopPropagation();     // don't fire the body click handler
    });
    });

    $(function() {           
    $("#thumbnails-container&gt;#thumbnails-wrapper&gt;#slidesthumbnails&gt;.thumbnails").mouseout(function (event) {             
        $(this).siblings().stop().animate({opacity:1.0}, 200);       
        $(this).stop().animate({opacity: 1.0}, 200); 
        event.stopPropagation();     // don't fire the body click handler
    });

    }); 
    });
</code></pre>

<p></p>

<pre><code>&lt;LINK REL="SHORTCUT ICON" HREF="http://benlevywebdesign.webatu.com/images/favicon.ico"&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="container"&gt;
&lt;div id="headerReplacement"&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;benlevygraphics&lt;/p&gt;
&lt;/div&gt;

&lt;span class="class1"&gt;&lt;div id="mainnav"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="http://benlevywebdesign.webatu.com/"&gt;&lt;img src="../images/homevector_v1.png" alt="" onmouseout="this.src='../images/homevector_v1.png'" onmouseover="this.src='../images/homevector_v2.png'"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;&lt;/span&gt;
      &lt;div id="titlegallery"&gt;
      &lt;p class="photographs"&gt;"The Best" - A Graphic Design Gallery&lt;/p&gt;
      &lt;/div&gt;

&lt;!--This is the gallery code here--&gt;
&lt;div id="gallery1"&gt;

    &lt;div id="slideshow-container"&gt;

    &lt;div class="slideshow-stage"&gt;
        &lt;img src="img/Building.jpg" /&gt;
        &lt;img src="img/Magazine Cover.jpg" /&gt;
        &lt;img src="img/Clocks.jpg" /&gt;
        &lt;img src="img/hitsdraft.jpg" /&gt;
        &lt;img src="img/regenwebsite.jpg" /&gt;
        &lt;img src="img/BrendanSchaffer.jpg" /&gt;
        &lt;img src="img/logobml.jpg" /&gt;
        &lt;img src="img/studiox.jpg" /&gt;
        &lt;img src="img/benlevygraphicsspace.jpg" /&gt;
        &lt;img src="img/five.jpg" /&gt;
        &lt;img src="img/backofcdcover.jpg" /&gt;
        &lt;img src="img/frontofcdcover.jpg" /&gt;
    &lt;/div&gt;


    &lt;div id="slide-caption-box"&gt;
    &lt;div id="imagedescription"&gt;
        &lt;img src="../images/Image-Description.png"&gt;
    &lt;/div&gt;
        &lt;div class="slide-caption"&gt;
                &lt;div&gt;
                    &lt;h4&gt;Vector Building&lt;/h4&gt;
                    &lt;p&gt;Drawn using Illustrator &lt;/p&gt;&lt;p class="creatednote"&gt;*AAU&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Magazine Cover&lt;/h4&gt;
                    &lt;p&gt;designed using Illustrator &lt;/p&gt;&lt;p class="creatednote"&gt;*AAU&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Clocks&lt;/h4&gt;
                    &lt;p&gt;designed using Illustrator &lt;/p&gt;&lt;p class="creatednote"&gt;*AAU&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Hole in the Sky Tours Website&lt;/h4&gt;
                    &lt;p&gt;website draft designed using Illustrator  &lt;a href="http://benlevywebdesign.webatu.com/holeintheskytours"&gt; View the finished Hole in the Sky Tours Website here&lt;/a&gt; &lt;/p&gt;&lt;p class="creatednote"&gt;*AAU&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Regen Website Mock-up&lt;/h4&gt;
                    &lt;p&gt;designed using Illustrator &lt;/p&gt;&lt;p class="creatednote"&gt;*AAU&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;BrendanSchaffer Logo Design&lt;/h4&gt;
                    &lt;p&gt;designed using Illustrator &lt;/p&gt;&lt;p class="creatednote"&gt;*HS&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;B M L Logo&lt;/h4&gt;
                    &lt;p&gt;Version 1 designed using Illustrator &lt;/p&gt;&lt;p class="creatednote"&gt;*HS&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                &lt;h4&gt;Studio X&lt;/h4&gt;
                    &lt;p&gt;Studio X Bio Page Mock-Up designed using Illustrator &lt;/p&gt;&lt;p class="creatednote"&gt;*AAU&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Ben Levy Graphics&lt;/h4&gt;
                    &lt;p&gt;Ben Levy Graphics name logo designed using Photoshop &lt;/p&gt;&lt;p class="creatednote"&gt;*HS&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Five&lt;/h4&gt;
                    &lt;p&gt;A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop &lt;/p&gt;&lt;p class="creatednote"&gt;*HS&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Five&lt;/h4&gt;
                    &lt;p&gt;A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop &lt;/p&gt;&lt;p class="creatednote"&gt;*HS&lt;/p&gt;
                &lt;/div&gt;

                &lt;div&gt;
                    &lt;h4&gt;Five&lt;/h4&gt;
                    &lt;p&gt;A printed out number 5 with hand drawn lines, then scanned in and colored using Photoshop &lt;/p&gt;&lt;p class="creatednote"&gt;*HS&lt;/p&gt;
                &lt;/div&gt;

                &lt;/div&gt;
                &lt;/div&gt;

    &lt;div id="thumbnails-container"&gt;
            &lt;a class="prev" id="slideshow-thumbs-prev"&gt;&lt;span&gt;prev&lt;/span&gt;&lt;/a&gt;
            &lt;a class="next" id="slideshow-thumbs-next"&gt;&lt;span&gt;next&lt;/span&gt;&lt;/a&gt;

        &lt;div id="thumbnails-wrapper"&gt;
        &lt;div id="thumbnails-box"&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/Building.jpg" width="58" height="40" /&gt;&lt;/div&gt;      
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/Magazine Cover.jpg" width="31" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/Clocks.jpg" width="62" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/hitsdraft.jpg" width="56" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/regenwebsite.jpg" width="60" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/BrendanSchaffer.jpg" width="50" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/logobml.jpg" width="55" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/studiox.jpg" width="56" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/benlevygraphicsspace.jpg" width="64" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/five.jpg" width="29" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/backofcdcover.jpg" width="52" height="40" /&gt;&lt;/div&gt;
    &lt;div class="thumbnails"&gt;&lt;img src="imglorez/frontofcdcover.jpg" width="80" height="40" /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

    &lt;div id="slideshow-prev"&gt;&lt;/div&gt;
    &lt;div id="slideshow-next"&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;
</code></pre>
