‹‹ cycle homejQuery Cycle Plugin - addSlide Demo

The markup for the slideshow above contains only two slides initially:

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

The script on this page uses the 'before' callback to access Cycle's options object which exposes the addSlide function:

<script type="text/javascript">

$(document).ready(function() {
    // start slideshow
    $('#slideshow').cycle({
        fx:      'curtainX',
        timeout:  2000,
        before:   onBefore
    });

    var slidesAdded = false;
    
    function onBefore(curr, next, opts) {
        // make sure we don't call addSlide before it is defined
        if (!opts.addSlide || slidesAdded)
            return;
        
        // add slides for images 3 - 8
        // slides can be a DOM element, a jQuery object, or a string
        for (var i=3; i < 9; i++)
            opts.addSlide('<img src="images/beach'+i+'.jpg" width="200" height="200" />');
        slidesAdded = true;
    };
});

</script>