title: Load dynamic content in Owl Carousel 2
body: <p>I have a webpage with 2 carousels in which I have to show different items depending on user actions.</p>
  
  <p>The new data comes from the internet, I use fetch, parse the json into an array, all good.</p>
  
  <p>Only problem is I can't have the new items replace the old ones in the carousel.</p>
  
  <p>For a simple example I have tried</p>
  
  <pre><code>var carousel = $jq("#owl-genres");
  for(...) {
     carousel.owlCarousel()
         .trigger('add.owl.carousel', [$jq('&lt;div class="item"&gt;' + genres[i] + '&lt;/div&gt;')])
         .trigger('refresh.owl.carousel');
  }
  </code></pre>
  
  <p>but nothing happens. The old elements remains, although the methods executes and the <code>.trigger</code> is executed.</p>
  
  <p>I have also tried</p>
  
  <pre><code>for(...) {
     content += '&lt;div class=\'item\'&gt;' + genres[i] + '&lt;/div&gt;'
     carousel.html(content)
  }
  carousel.owlCarousel().trigger('refresh.owl.carousel');
  </code></pre>
  
  <p>which indeed adds the new items to the carousel but they are now vertically stacked, the navigation doesn't work, I guess the whole carousel is broken.</p>
  
  <p>So what's the correct way to replace the items in Owl Carousel 2? </p>