title: Image slider...next and prev buttons not working
body: <p>I can not get my jquery image slider to scroll to the next set of images.  It keeps bringing me back to the top of the page when i click on the next arrow.  I am not sure if the next row of images is set up properly either.  Sorry, but I am new to using jquery.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="wrapper2"&gt;
  &lt;label style="color: #5C5C5C;display: block; font-weight: bold; font-size:16px; text-align: center;margin-bottom:0px;padding-bottom:20px;"&gt;Reaching our Goal is proud to partner with great organizations&lt;/label&gt;
          &lt;div id="thumbs-wrapper2"&gt;
              &lt;div id="thumbs"&gt;
                  &lt;a class="selected" href="#2"&gt;&lt;img src="/assets/images/ROG_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/gametime_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/american_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/bfs_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/vballfestival_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/yfbca_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/sportsattack_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/ROG_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/gametime_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/american_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/bfs_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/vballfestival_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/yfbca_p.jpg" /&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;img src="/assets/images/sportsattack_p.jpg" /&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;a id="prev" href="#"&gt;&lt;/a&gt;
              &lt;a id="next" href="#"&gt;&lt;/a&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script</p>
  
  <pre><code>$('#thumbs').carouFredSel({
          responsive: true,
          auto: true,
          prev: '#prev',
          next: '#next',
          items: {
              visible: 
               min: 2,
               max: 4
              },
              width: 150,
              height: '25%'
      });
      });
  
      $('#thumbs a').click(function() {
          $('#carousel').trigger('slideTo', '#'+this.href.split('#').pop());
          $('#thumbs a').removeClass('selected');
          $(this).addClass('selected');
          return false;
      });
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#wrapper2 {
      position: relative;
      width: 100%;
      top: 50px;
  }
  #carousel, #thumbs {
      overflow: hidden;
      height: 62px;
  }
  
  #carousel span, #carousel img,
  #thumbs a, #thumbs img  {
      display: block;
      float: left;
  }
  #carousel span, #carousel a,
  #thumbs span, #thumbs a {
      position: relative;
  }
  #carousel img,
  #thumbs img {
      border: medium none;
      height: 58px;
      left: 0;
      position: relative;
      top: 0;
      width: 100px;
  }
  #carousel img.glare,
  #thumbs img.glare {
      width: 102%;
      height: auto;
  }
  
  #thumbs-wrapper2 {
      padding: 20px 40px;
      position: relative;
      width: 73%;
      margin: -18px 0 0 162px;
      height: 90px;
  }
  #thumbs a {
      height: 58px;
      margin: 0 10px;
      overflow: hidden;
      width: 100px;
      border: 2px solid #899;
      border-radius: 10px;
      -webkit-transition: border-color .5s;
      -moz-transition: border-color .5s;
      -ms-transition: border-color .5s;
      transition: border-color .5s;
  
  }
  #thumbs a:hover, #thumbs a.selected {
      border-color: #566;
  }
  
  #prev, #next {
      display: block;
      height: 50px;
      margin: -38px 0 0 -35px;
      position: absolute;
      top: 50%;
      width: 50px;
  }
  #prev {
      background-image: url(/assets/images/left.jpg);
      background-position: 0 0;
      left: 10px;
  }
  #next {
      background-image: url(/assets/images/right.jpg);
      background-position: -50px 0;
      right: 33px;
  }           
  #prev:hover { 
      background-position: 0 0;               
  }
  #next:hover {
      background-position: -50px 0;               
  }
  
  #prev.disabled, #next.disabled {
      display: none !important;
  }
  </code></pre>