无法初始化动态构建的实体化轮播

Question

I am attempting to dynamically build a Materialize carousel (NOT a slider) from Flickr pictures, but I haven't been able to get the pictures to change. The picture that shows is always the last picture taken from Flickr, so I feel like something is scrolling, but it just isn't continuing to rotate the way a carousel should.

I've looked on SO and Google for answers, but 99% of the info is Bootstrap specific. I've added an active class to the first item and tried initializing the carousel both from inside the html as well as from the javascript, but neither seemed to help. Here is the html code:

<div class="carousel initialized" id="flickrPic"></div>

and the JS:

$.ajax({
 type: "GET",
 url: flickrApiUrl + $.param(flickrApiParams),
 success: function(response) {
    var flickrPetPics = response.photos.photo
    for(i=0; i<flickrPetPics.length; i++) {
      var newSlide = makeFlickrCarousel(flickrPetPics[i]);      
      $('.carousel-item').first().addClass('active');
      $('#flickrPic').carousel();
      $("#flickrPic").append(newSlide);
    }
  }
 });

function makeFlickrCarousel(photoInfo) {
 var flickPicUrl = "https://farm" + photoInfo.farm +".staticflickr.com/";
 flickPicUrl += photoInfo.server + "/" + photoInfo.id + "_" + photoInfo.secret;
 flickPicUrl += "_q.jpg";

 //Build carousel pieces
 var newItem = $("<a>").addClass("carousel-item");
 var flickrImg = $("<img>").attr("src", flickPicUrl);

 newItem.append(flickrImg);

 return newItem;
}

Thanks for the help!

Answer 1

You should remove the .initialized class from the carousel div container and move the $('#flickrPic').carousel() initialization after the for loop like this:

   ...

    for(i=0; i<flickrPetPics.length; i++) {
      var newSlide = makeFlickrCarousel(flickrPetPics[i]);      
      $('.carousel-item').first().addClass('active');
      $("#flickrPic").append(newSlide);
    }
    $('#flickrPic').carousel(); // <-- Initialize the carousel after the loop has created the carousel markup

    ...