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

var c_opt = {
        loop: 0,
        fx: 'carousel',
        carouselVisible: 3,
        slides: 'div.item'
    };

$('#instagramSlides').cycle(c_opt);

    $('#instagramSlides').on('cycle-after', function (event, opts) {
        if(opts.nextSlide === 0) {
            $(this).cycle('destroy');
            for (var i = opts.slideCount + 1; i < opts.slideCount + 6; i++) {
                $(this).append("<div class=\"item\"><h1>" + i + "</h1></div>");
            }
            $(this).cycle(c_opt);
        }
    });