title: Adding images to a Bootstrap Carousel with AJAX
body: <p>I have a Carousel like this:</p>
  
  <pre><code> &lt;div class="col-sm-4"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-block"&gt;
                  &lt;div class="col-sm-12"&gt;
                      &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"&gt;
  
                          &lt;div class="carousel-inner" role="listbox" id="carrusel"&gt;
                              &lt;div class="carousel-item item active"&gt;
                                  &lt;img class="d-block img-fluid" src="mysource.jpg" alt="First slide"&gt;
                              &lt;/div&gt;
                              &lt;div class="carousel-item item"&gt;
                                  &lt;img class="d-block img-fluid" src="mysource.jpg" alt="Second slide"&gt;
                              &lt;/div&gt;
                              &lt;div class="carousel-item item"&gt;
                                  &lt;img class="d-block img-fluid" src="mysource.jpg" alt="Third slide"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- Left and right controls --&gt;
                          &lt;a class="left carousel-control" href="#carouselExampleIndicators" data-slide="prev"&gt;
                              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;a class="right carousel-control" href="#carouselExampleIndicators" data-slide="next"&gt;
                              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
                              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This works fine. Everything works.</p>
  
  <p>I want to load images with Javascript, so I did this:</p>
  
  <pre><code> $.ajax({
          type: "POST",
          async: true,
          url: '/getmoreimages/' + someid,
          dataType: 'json',
          success: function (data) {
  
              $.each(data.imageurl, function (key,data) {
                  $('#carrusel').append($('&lt;div class="carousel-item item active"&gt;&lt;img class="d-block img-fluid" src='  + data + '&gt;&lt;/div&gt;'));
              });
  
              console.log(data);
  
          },
          error: function (data) {
              console.log('Error:', data);
          }
      });
  </code></pre>
  
  <p>I was expecting that the carousel would add more images depending on where you click.</p>
  
  <p>Instead, it adds an static carousel that doesn't work at all for each image, breaking the page.</p>
  
  <p>Any suggestions?</p>