Cycle2 Carrusel add slides

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.carousel.min.js"></script>
<div id="instagramSlides">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
</div>

CSS

h1 {
    width: 200px;
    height: 200px;
    border: solid 1px black;
}
div {
    float: left;
}

JavaScript

$('#instagramSlides').cycle({
        loop: 1,
        fx: 'carousel',
        carouselVisible: 3,
        slides: 'div'
    });

    $('#instagramSlides').on('cycle-finished', function (event, opts) {
        for (var i = 5; i < 10; i++) {
            var content = ["<div class=\"item\"><h1>" + i + "</h1></div>"];
            $('#instagramSlides').cycle('add', content);
        }
    });