Question

使用JSON / AJAX在Owl轮播2中显示动态内容时遇到问题。我在控制台中没有收到任何错误消息，但无法让旋转木马工作。我只看到一个空白页面。我可以使用jquery.append附加从JSON文件中获取的图像URL，但它们不会以这种方式显示在轮播中。显示设置为“阻止”。我缺少什么提示？

index.html -

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rengastie</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" href="css/style.css">

  </head>
  <body>

    <div class="row">
      <div class="small-12 columns">
        <div id="top-carousel" class="owl-carousel owl-theme">

        </div>
    </div>
  </div>

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/app.js"></script>

  </body>
</html>

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 += "<div class='item'><img src=\"" +data.owl[i].img+ "\" alt=\"" +alt+ "\"></div>";
        }

    $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"
    }
  ]
}

Answer 1

自版本2.0.0起，owlcarousel不再支持从json数据加载项目。但它们确实支持自定义插件以便即时与核心进行交互。我需要开发一个插件来实现这一目标。这是代码。

/**
 * 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 );

并使用此 -

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

这是一种非常简约的方法来完成工作。您需要根据需要进行修改。

我希望这会对你有所帮助。

<强>更新

注意到这个过程有点奇怪。似乎Owlcarousel以某种单一模式加载其插件。因此，如果页面中有多个轮播实例，则只更新最后一个轮播。我认为它适用于$.getJSON()的异步行为，但我不确定。无论如何，我做了一个工作来遵守

猫头鹰旋转木马2动态内容JSON

1 个答案: