title: How can I create bootstrap carousel dynamically?
body: <p>I want to build carousel dynamically. 
  here is my html code</p>
  
  <pre><code>&lt;div id="mycarousel"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in javascript i am doing this;</p>
  
  <pre><code>var data='';
  data='&lt;div id="relatedItemCarousel"  class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000"  &gt;';
          data=data+'&lt;div class="carousel-inner" id="relatedItemCraousel1"&gt;'; 
  //caraousel content
  data='&lt;/div&gt;'
  data=data+'&lt;a class="left carousel-control" id="related-item-carousel-control-left" href="#relatedItemCarousel" role="button" data-slide="prev" &gt;'+
          '&lt;i class="ion-ios-arrow-back size-32" &gt;&lt;/i&gt;&lt;/a&gt;'+            
      '&lt;a class="right carousel-control" id="related-item-carousel-control-right" href="#relatedItemCaraousel" role="button" data-slide="next" &gt;'+
          '&lt;i class="ion-ios-arrow-forward size-32" &gt;&lt;/i&gt;'+
      '&lt;/a&gt;&lt;/div&gt;';
    $('#mycarousel').html(data);
  </code></pre>
  
  <p>But it is not showing anything on page. Do I need to refresh carousel again?</p>