title: Owl Carousel With Dynamic Content - Prev/Next Navigation Not Working
body: <p>I am using jquery owl carousel plugin to dynamically present html page components to the users.</p>
  
  <p>The problem is the Prev/Next navigation and loop not working with dynamically added contents if the Drag triggers are set to false/ disabled.</p>
  
  <p>Here is the codes:</p>
  
  <p><strong>Options</strong></p>
  
  <pre><code>var owlcarousel_obj = {
                  loop: true,
                  nav: true,
                  navContainer: "#cv-navigation",
                  mouseDrag: false,
                  touchDrag: false,
                  pullDrag: false,
                  dots: true,
                  dotsEach: true, */
                  navText: ['&lt;span id="nav-arrow-left" class="nav-arrow inline-block"&gt;&lt;i class="fa fa-chevron-left fa-lg"&gt;&lt;/i&gt;&lt;/span&gt;', '&lt;span id="nav-arrow-right" class="nav-arrow inline-block"&gt;&lt;i class="fa fa-chevron-right fa-lg"&gt;&lt;/i&gt;&lt;/span&gt;'],
                  nestedItemSelector: "owl-item",
                  responsive:{
                      0:{
                          items:1,
                      },
                      320:{
                          items:2,
                      },
                      480:{
                          items:3,
                      },
                      768:{
                          items:4,
                      },
                      1000:{
                          items:6,
                      }
                  }
              };
  </code></pre>
  
  <p><strong>initialize owl carousel</strong></p>
  
  <pre><code>var vartcarousel = $("#cv-contents");
  vartcarousel.owlCarousel(owlcarousel_obj);
  </code></pre>
  
  <p><strong>I added this custom trigger, but still not working</strong></p>
  
  <pre><code>$(".nav-arrow-left").on("click touch", function(){
      vartcarousel.trigger("next.owl.carousel");
  }); 
  $(".nav-arrow-right").on("click touch", function(){
      vartcarousel.trigger("prev.owl.carousel");
  }); 
  </code></pre>
  
  <p><strong>Load contents dynamically</strong></p>
  
  <pre><code>$(".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();
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id="cv-header" class="d-table"&gt;
          &lt;span class="cv-header-text pull-left"&gt;Test&lt;/span&gt;
          &lt;span class="cv-close-box"&gt;&lt;i class="fa fa-times fa-lg"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;div id="cv-navigation" class="pull-right d-tcell"&gt;&lt;/div&gt;
          &lt;div class='clear'&gt;&lt;/div&gt;   
      &lt;/div&gt;
  
      &lt;div id="cv-contents" class=""&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How to solve this problem?</p>