web-dev-qa-db-ja.com

Owlcarousel2動的にロードされたコンテンツ

フクロウカルーセル2へのajaxのコンテンツの読み込みに問題があります。この関数で新しいアイテムを取得しようとしています。

_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に新しいアイテムを追加すると$(".owl-stage").append(data);表示されますが、スライドできません。 owlcarouselは、もっとたくさん追加しても、まだ5つのアイテムしかないと思っていると思います。

$(".owl-stage").append(data);を$(".owl-stage").html(data);に変更すると、状況が変わります。その後、明らかに古いコンテンツは消えますが、新しいアイテムにスライドできます。

誰かが私が何をすべきかを提案できますか？ owlcarousel2.0.4を使用しています。

javascriptjqueryajaxowl-carousel
8
Arkadiusz Rosiak

私にとって、受け入れられた答えは機能しませんでしたが、この解決策は仕事をしました：

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

これは、少なくとも今日のOwl Carousel v2では、jQueryオブジェクトを「追加」に渡す必要があるためです。

Githubチケットを参照してください ＃117 Gurunaveがこれを最もよく説明しています。

9
Alex C

実行中のカルーセルでjQueryを使用してアイテムを追加しないでください。代わりに、次のようにaddメソッドを使用する必要があります。

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

これには最新の開発が必要であることに注意してください： https://github.com/OwlFonk/OwlCarousel2#building 。

5
witrin