Edit in JSFiddle

<base href="http://css-tricks.github.com/AnythingSlider/">
<div id="wrap">
    <ul id="slider">
        <li><img src="demos/images/slide-civil-1.jpg" data-thumb="demos/images/slide-civil-1.jpg" alt="" /></li>
        <li><img src="demos/images/slide-env-1.jpg" data-thumb="demos/images/slide-env-1.jpg" /></li>
        <li><img src="demos/images/slide-civil-2.jpg" data-thumb="demos/images/slide-civil-2.jpg" /></li>
        <li><img src="demos/images/slide-env-2.jpg" data-thumb="demos/images/slide-env-2.jpg" /></li>
    </ul>
</div>
<!-- Add stylesheets here -->
<link rel="stylesheet" href="css/theme-metallic.css">

$(function () {
    function updateThumbs(slider) {
        var prv = slider.targetPage - 1 < 0 ? slider.panels : slider.targetPage - 1,
            nxt = slider.targetPage + 1 > slider.panels - 1 ? 0 : slider.targetPage + 1;
        $('.prev-thumb img').attr('src', slider.$items.eq(prv).find('img[data-thumb]').attr('data-thumb'));
        $('.next-thumb img').attr('src', slider.$items.eq(nxt).find('img[data-thumb]').attr('data-thumb'));
    };

    /* use slide_complete instead of slide_begin if you want the thumbs to change
       after the animation has completed, but the updating then won't match the 
       default navigation styling
    */
    $('#slider').on('initialized slide_begin', function(e, slider){
        if (!slider.$wrapper.find('.prev-thumb').length) {
            slider.$wrapper.append('<div class="prev-thumb"><img/></div><div class="next-thumb"><img/></div>');
        }
        updateThumbs(slider);
    });
    
    /* initialize the slider */
    $('#slider').anythingSlider({
        theme: 'metallic'
    });

});