Question

尝试构建一个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);

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

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

Answer 2

经过长时间的努力，我决定回到第一次尝试 owl carrousel ，在叔叔谷歌的帮助下，我得到了它。

以下是工作原理：

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

jquery cycle2 carousel添加幻灯片

2 个答案: