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

I'm not sure what the intended purpose is, but I can tell you one thing: I don't like this cycle 2 plugin. It seems to be broken for the `add` function. It keeps adding the new slides to the wrapper rather than the slides container. I've hacked together a version that destroys the cycle and recreates it using simple jquery append: http://jsfiddle.net/4nwjd3td/. Not sure if this is what you're after and it doesn't answer your question, but if this works for what you needed, I'll repost it as an answer. — Joseph Marikle, Dec 24 '14 at 23:19
all most there. tried to put my ajax call in your code and add the extra slides to #instagramSlides but they are showed in the slideshow and below? see my first post for the code so far — Michael Falch Madsen, Dec 25 '14 at 10:30

score 0 · Answer 1 · answered Dec 25 '14 at 08:26

0

Try this

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

answered Dec 25 '14 at 08:26

anujsoft

81
5

according to the docs the cycle-finished event is only triggered if loop=1. Thanks for trying :) – Michael Falch Madsen Dec 25 '14 at 09:38

score 0 · Accepted Answer · answered Dec 29 '14 at 16:46

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: ["&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 add slides

2 Answers2