‹‹ cycle homejQuery Cycle Plugin - Advanced Pager Demo

$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    
    // callback fn that creates a thumbnail to use as pager anchor
    pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
    }
});

#slideshow { left: 20px }
#nav { width: 300px; margin: 15px }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav li.activeSlide a { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }