title: Bootstrap 4 Dynamic Carousel using Jquery
body: <p>I'm trying to add images dynamically to a Bootstrap Carousel but it just shows them in a list (<a href="https://i.imgur.com/8lOOg3w.jpg" rel="nofollow noreferrer">https://i.imgur.com/8lOOg3w.jpg</a>). </p>
  
  <p>The images are National Parks Service API urls (<a href="https://www.nps.gov/common/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg" rel="nofollow noreferrer">https://www.nps.gov/common/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg</a>).</p>
  
  <p>Here's the HTML</p>
  
  <pre><code>&lt;div id="carousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;&lt;/ol&gt;
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;&lt;/div&gt;
      &lt;!-- Controls --&gt;
          &lt;a class="carousel-control-prev" href="#demo" data-slide="prev"&gt;
          &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;a class="carousel-control-next" href="#demo" data-slide="next"&gt;
          &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JS</p>
  
  <pre><code>$(document).ready(function(){
  for(let j = 0; j &lt; parkInfo.data[i].images.length; j++) {
    $('&lt;div class="item"&gt;&lt;img src="'+parkInfo.data[i].images[j].url+'" width="50%"&gt;   &lt;/div&gt;').appendTo('.carousel-inner');
    $('&lt;li data-target="#carousel" data-slide-to="'+j+'"&gt;&lt;/li&gt;').appendTo('.carousel-indicators')
  
  }
    $('.item').first().addClass('active');
    $('.carousel-indicators &gt; li').first().addClass('active');
    $('#carousel').carousel();
  });
  </code></pre>