jCarousel als Hybrid Variante

Im Rahmen eines aktuellen Projekts war es notwendig eine jCarousel Instanz mit statischer Vorbelegung dynamisch zur Laufzeit um neue Elemente zu erweitern. Auf der Webseite von jCarousel gibt es dazu leider keine Dokumentation.

Das Vermischen der beiden Varianten brachte im ersten Schritt keinen Erfolg, aber die Lösung war nur einen Steinwurf entfernt: Wir verwenden ein Javascript Array als Puffer und fügen dort alle nachgeladenen Elemente ein. Für die Anzeige durchlaufen wir das Array und hängen alle neuen Elemente in die Carousel Instanz ein. Das ganze sieht wie folgt aus:

// cache for carousel elements
var carouselCache = new Array();
var carouselInit  = true;
$('#mycarousel').jcarousel({visible: 5,scroll: 1, buttonNextCallback: function(carousel, element, state) {
    if(carouselInit) {
        // skip first load - we already have those items in store!
        carouselInit = false;
        carousel.size(carouselCache.length);
        return;
    }

    $.get($('#mycarousel').attr('ajaxurl'), {
            iBatchStart: carousel.last,
            iBatchSize: 6
        },
        function(data) {
            $.each(data.results, function(i, item) {
                addToCarouselCache(item);
            });

            carousel.size(carouselCache.length);
            for (var i = 0; i <= carouselCache.length; i++) { if (carousel.has(i)) { continue; } if (i > carouselCache.length) {
                break;
            }

                if(carouselCache\[i-1\]) {
                    carousel.add(i, getCarouselHTML(carouselCache\[i-1\]));
                }
            }
        },
        'json'
    );
    }  
});