Markup

<div id="nav"></div>
<div id="slideshow" class="pics">
    <img src="images/beach1.jpg" width="200" height="200" alt="Beach 1" />
    <img src="images/beach2.jpg" width="200" height="200" alt="Beach 2" />
    <img src="images/beach3.jpg" width="200" height="200" alt="Beach 3" />
    <img src="images/beach4.jpg" width="200" height="200" alt="Beach 4" />
    <img src="images/beach5.jpg" width="200" height="200" alt="Beach 5" />
    <img src="images/beach6.jpg" width="200" height="200" alt="Beach 6" />
    <img src="images/beach7.jpg" width="200" height="200" alt="Beach 7" />
    <img src="images/beach8.jpg" width="200" height="200" alt="Beach 8" />
</div>
<div id="caption"></div>
    

Script

$(function() {
    $('#slideshow').cycle({
        fx:     'curtainX',
        sync:    false,
        speed:   500,
        timeout: 3000,
        pager:  '#nav',
        before: function() { 
            $('#caption').html(this.alt);
        }
    });
});