Adding images to a Bootstrap Carousel with AJAX

If data is an array with objects like:

{ ...,
  imageurl: String,
  ... 
}

Then try to modify your loop as follows:

success: function (data) {
   $.each(data, function (key, elem) {
      $('#carrusel').append($('<div class="carousel-item item active"><img class="d-block img-fluid" src='  + elem.imageurl + '></div>'));
   });

   //create carousel instance
}

Have in mind than the js carrousel loader might need the images to be already present in the html to render properly.

Leave a Comment