‹‹ cycle homejQuery Cycle Plugin - Progressive Enhancement Demo

The markup for the slideshow above contains only one slide initially:

<div id="slideshow" class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
</div>

Note that slideshows must contain at least two slides before invoking the cycle function.

The script on this page uses the following code:

<script type="text/javascript">

    var $ss = $('#slideshow');
        
    // add slides to slideshow (images 2-8)
    for (var i = 2; i < 9; i++)
        $ss.append('<img src="images/beach'+i+'.jpg" width="200" height="200" />');

    // start the slideshow
    $ss.cycle();

</script>