Sudo Slider jQuery Plugin - Callbacks 4 (thumbnails) demo

afterAniFunc & beforeAniFunc in docs

Usage

Include the javascripts

<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it.

<script type="text/javascript" >
$(document).ready(function(){	
    var sudoSlider = $("#slider").sudoSlider({ 
        ajax: ['../images/01.jpg', '../images/02.jpg', '../images/03.jpg', '../images/04.jpg', '../images/05.jpg'],
        numeric:true,
        preloadAjax:true,
        ajaxLoadFunction: function(t){
            var url = $(this).children().attr('src');	
            $('.controls li a span').eq(t-1).html('<img src="' + url + '" width="80" height="28" />');
        }
    });
});
</script>

The CSS

#slider {
    width:696px;
}
#slider img{
    border:none;
}
#slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
}
#slider li { 
    width:696px;
    overflow:hidden; 
}

The HTML

<div id="slider" ></div>