jquery cycle2 carousel add slides

Question

Trying to build a jquery cycle2 carousel which loads extra slides on 'cycle-finished' but the extra slides a added wrong and the carousel dont proceed.

JSFiddle example here My HTML:

<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>

My Javascript:

$('#instagramSlides').cycle({
    loop: 1,
    fx: 'carousel',
    carouselVisible: 4,
    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);
    }
});

Try 1:

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');
        $.ajax({
            url: "/Home/Instagram20",
            type: "POST",
            data: { maxId: null },
            dataType: "json",
            success: function (data) {
                var info = $.parseJSON(data);
                for (var i = 5; i < 10; i++) {
                    var content = "<div class=\"item\"><img width=\"200\" height=\"200\" src=\"" + info['data'][i]['images']['thumbnail']['url'] + "\" /></div>";
                    $('#instagramSlides').append(content);
                }
            }
        });
        $(this).cycle(c_opt);
    }
});

if I add them as this:

$('.cycle-carousel-wrap').append(content);

there are added just fine but are not part of the slideshow

Answer 1

After struggeling with this for way to long I decided to go back to my first try owl carrousel and with a little help from uncle google I got it working.

Here is the working soulution:

$(document).ready(function () {
    $("#owl-instagram").owlCarousel({
        items: 5,
        rewindSpeed: 500,
        autoPlay: 2000,
        stopOnHover: true,
        lazyLoad: true,
        //navigation: true,
        //navigationText: ["<", ">"],
        responsive: true,
        autoWidth: true,
        loop: true,
        afterMove: moved
    });
});

function moved() {
    var owl = $("#owl-instagram").data('owlCarousel');
    if (owl.currentItem + 5 === owl.itemsAmount) {
        $.ajax({
            url: "/Home/Instagram20",
            type: "POST",
            data: { maxId: $('#nextId').val() },
            dataType: "json",
            success: function (data) {
                var info = $.parseJSON(data);
                if (info['pagination']['next_max_tag_id'] < $('#nextId').val()) {
                    $('#nextId').val(info['pagination']['next_max_tag_id']);
                    addSlides(info);
                }
            }
        });
    }
}

function addSlides(data) {
    console.log(data);
    var owl = $("#owl-instagram");
    var content = "";

    for (var i = 0; i < data['data'].length; i++) {
        content += "<div class=\"owl-item\" style=\"width: " + owl.data('owlCarousel').itemWidth + "px;\">" +
            "<a href=\""+data['data'][i]['link']+"\" class=\"instagramSlideItem\" target=\blank\">" +
            "<img class=\"img-responsive\"src=\"" + data['data'][i]['images']['standard_resolution']['url'] + "\" alt=\"\" />" +
                            "<img src=\"" + data['data'][i]['user']['profile_picture'] + "\" alt=\"\" style=\"width:60px; position:absolute; bottom:0px; right:5px; border:solid 1px #d41217\" />" +
                        "</a>" +
                    "</div>";
    }

    owl.find(".owl-wrapper").append(content);

    //Copied and tweaked from setVars() in owl.carousel.js
    var base = owl.data('owlCarousel');
    base.$userItems = base.$elem.find('.owl-item');
    base.itemsAmount = base.$userItems.length;
    base.$owlItems = base.$elem.find(".owl-item");
    base.$owlWrapper = base.$elem.find(".owl-wrapper");
    base.onStartup();
}