Búho carrusel 2 contenido dynamic JSON

Tengo un problema con la visualización de contenido dynamic con Owl carousel 2 utilizando JSON / AJAX. No aparece ningún mensaje de error en la consola, pero no consigo que el carrusel funcione. Solo veo una página en blanco. Puedo adjuntar la url de imagen obtenida del archivo JSON con jquery.append, pero no se mostrarán en el carrusel de esa manera. Las pantallas están configuradas en “bloque”. ¿Algún consejo de qué me estoy perdiendo?

index.html –

    Rengastie       

app.js –

 $(document).ready(function() { $('.owl-carousel').owlCarousel(); }); var $owl = $('.owl-carousel'); $owl.owlCarousel({ loop:true, items: 1, autoplay:true, autoplayTimeout:3000, autoplayHoverPause:false }); $.ajax({ url: 'json/data.json', dataType: 'json', success: function(data) { var content = ''; var alt = "pic123"; for (i in data.owl) { content += "
"; } $owl.trigger('insertContent.owl',content); //$owl.append(content); This stacks the images above eachother, not affected by the carousel settings } });

data.json –

 { "owl" : [ { "img": "img/kuvaIso1.jpg" }, { "img": "img/kuvaIso2.jpg" }, { "img": "img/kuvaIso3.jpg" }, { "img": "img/kuvaIso4.jpg" }, { "img": "img/kuvaIso5.jpg" } ] } 

A partir de la versión 2.0.0, owlcarousel ya no admite la carga de elementos desde datos json . Pero, de hecho, admiten complementos personalizados para interactuar con el núcleo sobre la marcha. Necesitaba desarrollar un plugin para lograr esto. Aquí está el código.

 /** * Owl Carousel JSON load plugin * @since 2.0.0 * @author maksbd19 * @link http://stackoverflow.com/questions/35838983/ */ ;(function ( $, window, document, undefined ) { var Insatances = undefined; var JSONload = function(carousel){ this._core = carousel; this.options = {}; this._handlers = { 'initialized.owl.carousel': $.proxy(function(e) { if (!e.namespace || !this._core.settings || !this._core.settings.path) { return; } Insatances = Insatances || []; if( !pathExists(this._core.settings.path, Instances) ){ Instances.push({ path: this._core.settings.path, onSuccess: this._core.settings.onSuccess, onError: this._core.settings.onError, loading: false }); } for( var i in Instances ){ if( Instances.hasOwnProperty(i) && Instances[i].path != '' && !Instances[i].loading ){ Instances[i].loading = true; $.getJSON(Instances[i].path, $.proxy(function (data) { if (typeof Instances[i].onSuccess === "function") { Instances[i].onSuccess.call(this, data); } }, this)).fail($.proxy(function (data) { if (typeof Instances[i].onError === "function") { Instances[i].onError.apply(this, [data]); } }, this)); } } function pathExists(path, instance){ if(instance.length == 0){ return false; } for( var i=0; i 

Y para usar esto-

 var OC = $("#owl-demo-featured").owlCarousel({ path : 'path/to/json', onSuccess : function(r){ if( r.length > 0 ){ for( var i in r ){ if( r.hasOwnProperty(i) ){ var $html = ''; // process you data with the template you want inject OC.trigger('add.owl.carousel', jQuery($html) ) } } OC.trigger('refresh.owl.carousel') } }, onError: function(r){ console.error(r); } }); 

Este es un enfoque muy minimalista para hacer el trabajo. Necesita modificar según lo que necesita.

Espero que esto ayude.

Actualizar

Acabo de notar algo extraño con este proceso. Parece que Owlcarousel carga sus complementos en un patrón un tanto único. Entonces, si había varias instancias de carrusel en una página, solo se estaba actualizando la última. Creo que es por el comportamiento asíncrono de $.getJSON() pero no estoy seguro. De todos modos hice un trabajo alrededor para cumplir.