jquery cycle2 轮播添加幻灯片

Question

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

JSFiddle example here我的 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>

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

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

Answer 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);
        }
    });