owl carousel dynamic data.js code example

Example 1: owl carousel json not working

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

Example 2: owl carousel json not working

/**
 * 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<instance.length; i++ ){
                    if( instance[i].path == path ){
                        return true;
                    }
                }

                return false;
            }

        }, this)
    };

    this.options = $.extend(JSONload.Defaults, this._core.options);
    this._core.$element.on(this._handlers);
}

JSONload.Defaults = {
    path: '',
    onSuccess:'',
    onError:''
};

$.fn.owlCarousel.Constructor.Plugins['JSONload'] = JSONload;
})( window.Zepto || window.jQuery, window,  document );