jquery cycle2 轮播添加幻灯片答案

【问题标题】：jquery cycle2 carousel add slidesjquery cycle2 轮播添加幻灯片
【发布时间】：2014-12-30 00:46:14
【问题描述】：

尝试构建一个 jquery cycle2 轮播，它会在“循环完成”上加载额外的幻灯片，但额外的幻灯片添加了错误并且轮播不继续。

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

我的 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);
    }
});

尝试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);

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

【问题讨论】：

我不确定它的预期目的是什么，但我可以告诉你一件事：我不喜欢这个 cycle 2 插件。 add 函数似乎已损坏。它不断将新幻灯片添加到包装器而不是幻灯片容器中。我已经破解了一个破坏循环并使用简单的 jquery 附加重新创建它的版本：jsfiddle.net/4nwjd3td。不确定这是否是您所追求的并且它不能回答您的问题，但如果这适合您的需要，我会重新发布它作为答案。
看起来很有希望！我会试试你的解决方案！
大部分都在那里。试图将我的 ajax 调用放入您的代码中并将额外的幻灯片添加到 #instagramSlides 但它们显示在幻灯片及下方？到目前为止，请参阅我的第一篇代码

标签： jquery html jquery-cycle

【解决方案1】：

试试这个

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

【讨论】：

根据文档，只有在 loop=1 时才会触发循环完成事件。感谢您的尝试:)

【解决方案2】：

在为此苦苦挣扎了很久之后，我决定回到我的第一次尝试owl carrousel，并在 google 叔叔的帮助下成功了。

这是可行的解决方案：

$(document).ready(function () {
    $("#owl-instagram").owlCarousel({
        items: 5,
        rewindSpeed: 500,
        autoPlay: 2000,
        stopOnHover: true,
        lazyLoad: true,
        //navigation: true,
        //navigationText: ["&lt;", "&gt;"],
        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();
}

【讨论】：