JQuery Pager

HTML

<div id="wrap">
<ul id="nav" class="clearfix">         
    <li><a href="#"><img src="" alt="Thumb 1" title="Thumb 1" width="50" height="50" /></a></li>      
    <li><a href="#"><img src="" alt="Thumb 2" title="Thumb 2" width="50" height="50" /></a></li>
    <li><a href="#"><img src="" alt="Thumb 3" title="Thumb 3" width="50" height="50" /></a></li>
</ul>     
<div id="slideshow" class="pics">
<div><img src="" alt="image 1" title="image 1" width="200" height="200" /></div>
<div><img src="" alt="image 2" title="image 2" width="200" height="200" /></div>
    <div><img src="" alt="image 3" title="image 3" width="200" height="200" /></div>
</div>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
</div>

CSS

.first {background:red;}

JavaScript

$(function() {
    $('#slideshow').cycle({
        fx:     'turnDown',
        speed:  'fast',
        timeout: 3000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        },
        after: check_list
    });

    $('#direct').click(function() {
        $('#nav li:eq(2) a').triggerHandler('click');
        return false;
    });
    
    $('#nav li').click(check_list);
    
});

function check_list() {
    if( $('.activeSlide').is(':last-child') ) {
        $('li:first').addClass('first');
    }
    else {
        $('li:first').removeClass('first');
    }
}