jquery carousel, create button 'on click go to slide x'

I'm working on a page with tabbed panels. underneath these pannels 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.

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 automaticly scrolls to for example slide1.

the function should be similar or the same as a pager or pagination for a slider/carousel

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.

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?

Thanks in advance

HTML

      <div id="carousel">
<div id="buttons">
    <a href="#" id="prev">prev</a>
    <a href="#" id="next">next</a>
</div>


<div id="slides"> 
    <ul>
        <li id="slide1"><img src="images/slide1.png" id="slide1" alt="Slide 1"/></li>
        <li id="slide2"><img src="images/slide2.png" id="slide2" alt="Slide 2"/></li>
        <li id="slide3"><img src="images/slide3.png" id="slide3" alt="Slide 3"/></li>
        <li id="slide4"><img src="images/slide4.png" id="slide4" alt="Slide 4"/></li>
        <li id="slide5"><img src="images/slide5.png" id="slide5" alt="Slide 5"/></li>
        <li id="slide6"><img src="images/slide6.png" id="slide6" alt="Slide 6"/></li>
        <li id="slide7"><img src="images/slide7.png" id="slide7" alt="Slide 7"/></li>
        <li id="slide8"><img src="images/slide8.png" id="slide8" alt="Slide 8"/></li>

    </ul>
    <div class="clear"></div>
</div>

jQeury

    $(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;

});    

    });

CSS

#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;
}