title: jQuery carousel, create button 'on click go to slide x'
body: <p>I'm working on a page with tabbed panels. underneath these panels I'm viewing an infinite carousel slideshow. whenever i click on a tab i would like that the images inside the would align with the content of the tab. </p>
  
  <p>I have an id for the tabs and I have id's for the slideshow images so I need a function that whenever I click on tab 1, the carousel automatically scrolls to for example slide1.</p>
  
  <p>the function should be similar or the same as a pager or pagination for a slider/carousel</p>
  
  <p>I'm working on this to happen for a few days, but i'm completely new to jquery and i can't get my head wrapped around how to write the function and variables.</p>
  
  <p>does anyone knows in which direction to look, or what functions and variables are needed, or whether it is even possible with the current setup?</p>
  
  <p>Thanks in advance</p>
  
  <p>HTML</p>
  
  <pre><code>      &lt;div id="carousel"&gt;
  &lt;div id="buttons"&gt;
      &lt;a href="#" id="prev"&gt;prev&lt;/a&gt;
      &lt;a href="#" id="next"&gt;next&lt;/a&gt;
  &lt;/div&gt;
  
  
  &lt;div id="slides"&gt; 
      &lt;ul&gt;
          &lt;li id="slide1"&gt;&lt;img src="images/slide1.png" id="slide1" alt="Slide 1"/&gt;&lt;/li&gt;
          &lt;li id="slide2"&gt;&lt;img src="images/slide2.png" id="slide2" alt="Slide 2"/&gt;&lt;/li&gt;
          &lt;li id="slide3"&gt;&lt;img src="images/slide3.png" id="slide3" alt="Slide 3"/&gt;&lt;/li&gt;
          &lt;li id="slide4"&gt;&lt;img src="images/slide4.png" id="slide4" alt="Slide 4"/&gt;&lt;/li&gt;
          &lt;li id="slide5"&gt;&lt;img src="images/slide5.png" id="slide5" alt="Slide 5"/&gt;&lt;/li&gt;
          &lt;li id="slide6"&gt;&lt;img src="images/slide6.png" id="slide6" alt="Slide 6"/&gt;&lt;/li&gt;
          &lt;li id="slide7"&gt;&lt;img src="images/slide7.png" id="slide7" alt="Slide 7"/&gt;&lt;/li&gt;
          &lt;li id="slide8"&gt;&lt;img src="images/slide8.png" id="slide8" alt="Slide 8"/&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function() {
  
      //rotation speed and timer
  var speed = 5000;
  var run = setInterval('rotate()', speed);   
  
  //grab the width and calculate left value
  var item_width = $('#slides li').outerWidth(); 
  var left_value = item_width * (-1); 
  
  //move the last item before first item, just in case user click prev button
  $('#slides li:first').before($('#slides li:last'));
  
  //set the default item to the correct position 
  $('#slides ul').css({'left' : left_value});
  
  //if user clicked on prev button
  $('#prev').click(function() {
  
      //get the right position            
      var left_indent = parseInt($('#slides ul').css('left')) + item_width;
  
      //slide the item            
      $('#slides ul:not(:animated)').animate({'left' : left_indent}, 500,function(){    
  
          //move the last item and put it as first item               
          $('#slides li:first').before($('#slides li:last'));           
  
          //set the default item to correct position
          $('#slides ul').css({'left' : left_value});
  
      });
  
      //cancel the link behavior            
      return false;
  
  });
  
  
  //if user clicked on next button
  $('#next').click(function() {
  
      //get the right position
      var left_indent = parseInt($('#slides ul').css('left')) - item_width;       
  
      //slide the item
      $('#slides ul:not(:animated)').animate({'left' : left_indent}, 500, function () {
  
          //move the first item and put it as last item
          $('#slides li:last').after($('#slides li:first'));                  
  
          //set the default item to correct position
          $('#slides ul').css({'left' : left_value});
  
      });
  
      //cancel the link behavior
      return false;
    });    
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#carousel {
  width:896px;
  height:172px;    
  margin:0 auto;
  }
  
  #slides {
  overflow:hidden;/* fix ie overflow issue */
  position:relative;
  width:896px;
  height:172px;
  border:none;
  float:left;
  }
  
  /* remove the list styles, width : item width * total items */    
  #slides ul {
  left:-250px;
  top:0;
  list-style-type:none;
  padding:0px;    
  width:9999px;
  position:relative;            
  }
  
   /* width of the item, in this case I put 250x250x gif */
  #slides li {
  width:296px;
  height:172px;    
  float:left;
  padding:0px;
  }
  
  #slides li img {
  padding:0px;
  margin:0 23px 0 23px;
  }
  
  /* Styling for prev and next buttons */
  #buttons {
  padding:0 0 0 0;  
  position:relative;  
  }
  
  #buttons a {
  display:block; 
  width:43px; 
  height:70px;
  text-indent:-999em;
  float:left;
  outline:0;
  }
  </code></pre>