Owlcarousel 2 динамически загружаемый контент

у меня проблемы с загрузкой содержимого ajax в owl carousel 2. Я пытаюсь получить новые элементы с помощью этой функции:

function loadDecisions(pageNumber) {
   $.ajax({
       url: globalURL,
       type: 'POST',
       data: {
           action: 'lw_infinite_scroll',
           loop_file: 'video',
           page_no: pageNumber,
           posts_per_page: postsPerPage
       },
       success: function(data) {
           $(".owl-stage").append(data);    
           owl = jQuery('.owl-carousel');

           count++;
           resizeStage();
       },
       error: function(e) {
       }
   });
   return false;
}

если я добавляю новые элементы .сова-сцена такая $(".owl-stage").append(data); Я вижу их, но не могу скользить к ним. Я думаю, что owlcarousel думает, что все еще есть только 5 пунктов, даже если я добавил гораздо больше.

ситуация изменится, если я изменю $(".owl-stage").append(data); to $(".owl-stage").html(data);. Затем, очевидно, старый контент исчезает, но я могу перейти к новым элементам.

Can кто-нибудь посоветует, что мне делать? Я использую owlcarousel 2.0.4.

3 ответов


для меня принятый ответ не сработал, но это решение выполнило свою работу:

$('.owl-carousel').owlCarousel().trigger('add.owl.carousel', 
                  [jQuery('<div class="owl-item">' + html +
                          '</div>')]).trigger('refresh.owl.carousel');

это потому, что, по крайней мере, на совиной карусели v2 сегодня необходимо передать объект jQuery в "add".

см. билет Github #1170 где Gurunave объясняет это лучше всего.


не добавлять элементы с помощью jQuery на работающей карусели. Вы должны использовать add метод вместо этого так:

 $('.owl-carousel').owlCarousel('add', '<markup>').owlCarousel('refresh')

пожалуйста заметьте что вам нужно самое последнее превратиться для этого:https://github.com/OwlFonk/OwlCarousel2#building.


Я сам не использую карусель совы, но, похоже, у нее есть методы addItem метод-попробуйте использовать это.