title: Can not add dynamically items to Owl Carousel in Javascript
body: <p>I'm trying to dynamically add items to an Owl carousel. Here is how I'm doing it: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="avatar-carousel" class="owl-carousel lesson-carousel"&gt;
                                              &lt;div class="item item-logo"&gt;
                                                &lt;div class="product-item"&gt;
                                                  &lt;div class="carousel-thumb" style="height: 77px!important;width: 70px;" &gt;
                                                        &lt;img src="http://placehold.it/140x100" alt=""&gt;
                                                  &lt;/div&gt;
                                                &lt;/div&gt;
                                              &lt;/div&gt;
                                                &lt;!-- Start Item --&gt;
                                          &lt;/div&gt;
  
                                          &lt;button id="click"&gt;
                                          click
                                          &lt;/button&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$("#avatar-carousel").owlCarousel({
  
        items: 5
    });
  
    $("#click").click(function(){
      $('#avatar-carousel').trigger('add.owl.carousel', ['&lt;div class="item"&gt;&lt;p&gt;' + 'hh' + '&lt;/p&gt;&lt;/div&gt;'])
                      .trigger('refresh.owl.carousel');
    });
  </code></pre>
  
  <p>Nothing happens with this code. I can't see the error. Here is the fiddle: <a href="https://jsfiddle.net/hj2xh2Lz/1/" rel="nofollow noreferrer">JSFiddle</a>. </p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>Seems like the code is correct, as it's working in the fiddle. 
  I forgot to mention that the carousel works just fine, it is loaded correctly in the beginning. The issue is when trying to add items. Nothing happens, no errors but items are not added. </p>