Сова Карусель 2 динамический контент JSON

У меня проблема с отображением динамического содержимого в Owl Carousel 2 с использованием JSON/AJAX. Я не получаю сообщений об ошибках в консоли, но не могу заставить карусель работать. Я вижу только пустую страницу. Я могу добавить URL-адрес изображения, извлеченный из файла JSON, с помощью jquery.append, но они не будут отображаться в карусели таким образом. Дисплеи установлены на "блок". Любые советы, что я пропускаю?

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"
    }
  ]
}
Источник

1 ответ

Решение

Начиная с версии 2.0.0 owlcarousel не поддерживает загрузку элементов из json данных больше. Но они действительно поддерживают пользовательские плагины для взаимодействия с ядром на лету. Мне нужно было разработать плагин для достижения этой цели. Вот код

/**
 * Owl Carousel JSON load plugin
 * @since 2.0.0
 * @author maksbd19 
 * @link http://stackru.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() но я не уверен. Во всяком случае, я сделал работу, чтобы соответствовать

Источник
Другие вопросы по тегам