動的コンテンツを含むOwl Carousel - 前/次のナビゲーションが機能しない

Question

jquery owl carouselプラグインを使用して、ユーザーに動的にHTMLページコンポーネントを提示しています。

Drag Triggerがfalse/disabledに設定されている場合、問題は前/次のナビゲーションとループでは動的に追加されたコンテンツでは機能しません。ここで

はコードです：

オプション

var owlcarousel_obj = { 
       loop: true, 
       nav: true, 
       navContainer: "#cv-navigation", 
       mouseDrag: false, 
       touchDrag: false, 
       pullDrag: false, 
       dots: true, 
       dotsEach: true, */ 
       navText: ['<span id="nav-arrow-left" class="nav-arrow inline-block"><i class="fa fa-chevron-left fa-lg"></i></span>', '<span id="nav-arrow-right" class="nav-arrow inline-block"><i class="fa fa-chevron-right fa-lg"></i></span>'], 
       nestedItemSelector: "owl-item", 
       responsive:{ 
        0:{ 
         items:1, 
        }, 
        320:{ 
         items:2, 
        }, 
        480:{ 
         items:3, 
        }, 
        768:{ 
         items:4, 
        }, 
        1000:{ 
         items:6, 
        } 
       } 
      }; 

が

var vartcarousel = $("#cv-contents"); 
vartcarousel.owlCarousel(owlcarousel_obj); 

フクロウカルーセルを初期化し、私はこのカスタムトリガーを追加しましたが、まだ

を動作していませんの

$(".nav-arrow-left").on("click touch", function(){ 
    vartcarousel.trigger("next.owl.carousel"); 
}); 
$(".nav-arrow-right").on("click touch", function(){ 
    vartcarousel.trigger("prev.owl.carousel"); 
}); 

ロードの内容を動的

$(".call-header").on("click touch", function(e){ 
    var comvars = $("#packagename-variations-group").html(); 
    vartcarousel.trigger("add.owl.carousel", comvars).trigger("refresh.owl.carousel"); 
    e.stopImmediatePropagation(); 
}); 

はHTML

<div id="cv-header" class="d-table"> 
     <span class="cv-header-text pull-left">Test</span> 
     <span class="cv-close-box"><i class="fa fa-times fa-lg"></i></span> 
     <div id="cv-navigation" class="pull-right d-tcell"></div> 
     <div class='clear'></div> 
    </div> 

    <div id="cv-contents" class=""> 
    </div> 

どのようにこの問題を解決するには？

Answer 1

owlCarouelオブジェクトは今「データ」jQueryのバインダーでオブジェクトにリンクされ、そして、自身の前/次のメソッドを使用している、そのようにそれを使用します。

var varcaroulsedata = varcarousel.data('owlCarousel'); 
$(".nav-arrow-left").on("click touch", function(){ 
    varcaroulsedata.prev(); 
}); 
$(".nav-arrow-right").on("click touch", function(){ 
    varcaroulsedata.next(); 
});