Adding Slides

Adding arbitrary slides after the slideshow has been initialized is performed programmatically by issuing the add command to the slideshow.

The slideshow below starts off with just a single image. Three more are added when the button is clicked.

<!-- slideshow with one image -->
<div class="cycle-slideshow" 
        data-cycle-fx="scrollHorz" 
        data-cycle-timeout="2000"
    >
    <div class="cycle-caption"></div>
    <img src="https://malsup.github.io/images/p1.jpg">
</div>

<div class=center>
    <button>Add More Images</button>
</div>

<!-- script to add more images at a later time -->
<script>
var images = [
    '<img src="https://malsup.github.io/images/p2.jpg">',
    '<img src="https://malsup.github.io/images/p3.jpg">',
    '<img src="https://malsup.github.io/images/p4.jpg">'
];

$('button').one('click', function() {
    for (var i=0; i < images.length; i++) {
        $('.cycle-slideshow').cycle('add', images[i]);
    }
    $(this).prop('disabled', true)
})
</script>