jquery cycle2旋转木马添加幻灯片

试图构建一个jquery cycle2转盘，该转盘在“cycle finished”上加载额外的幻灯片，但额外的幻灯片添加错误，转盘无法继续

我的HTML：

添加的内容很好，但不是幻灯片的一部分

$('#instagramSlides').cycle({
        loop:0,
        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);
        }
    });

$（'instagramSlides'）。循环({
循环：0，
fx:‘旋转木马’，
旋转游览：3，
幻灯片：“div”
});
$（'instagramSlides'）。on（'cycle-finished'，函数（事件，选项）{
对于（变量i=5；i<10；i++）{
变量内容=[“”+i+“”]；
$（'instagramSlides'）。循环（'add'，content）；
}
});

经过长时间的努力，我决定回到我的第一次尝试猫头鹰卡鲁塞尔，在谷歌叔叔的一点帮助下，我成功了

以下是工作溶液：

$(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();
}

$（文档）.ready（函数（）{
$（“#猫头鹰instagram”）.owlCarousel({
项目：5，
复卷速度：500，
自动播放：2000，
stopOnHover:true，
懒汉：没错，
//导航：对，
//导航文本：[“”，“”]，
回答：是的，
自动宽度：正确，
循环：对，
后移：移动
});
});
函数移动（）{
var owl=$（“#owl instagram”）.data（'owlCarousel'）；
if（owl.currentItem+5==owl.itemsAmount）{
$.ajax({
url:“/Home/Instagram20”，
类型：“POST”，
数据：{maxId:$（'#nextId'）.val（），
数据类型：“json”，
成功：功能（数据）{
var info=$.parseJSON（数据）；
if（info['pagination']['next_max_tag_id']<$（'nextId'）.val（））{
$（'nextId'）.val（信息['pagination']['next\u max\u tag\u id']）；
添加幻灯片（信息）；
}
}
});
}
}
功能添加幻灯片（数据）{
控制台日志（数据）；
var owl=$（“#owl instagram”）；
var-content=“”；
对于（变量i=0；i

我不确定它的目的是什么，但我可以告诉你一件事：我不喜欢这个cycle 2插件。

add

功能似乎已中断。它不断地将新幻灯片添加到包装器而不是幻灯片容器中。我已经拼凑了一个版本，它破坏了这个循环，并使用简单的jquery append:重新创建了它。不确定这是否是你想要的，也不能回答你的问题，但如果这能满足你的需要，我会把它作为一个答案重新发布。这看起来很有希望！我要试试你的解决办法！都在那里。试图将我的ajax调用放入您的代码中，并将额外的幻灯片添加到#instagramSlides中，但它们显示在幻灯片和下面？请参阅我的第一篇文章，了解到目前为止的代码。根据文档，循环完成事件仅在循环=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);
    }
});

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

$('#instagramSlides').cycle({
        loop:0,
        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);
        }
    });

$(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();
}