無法初始化動態構建的實體化輪播

Question

我試圖從Flickr圖片動態構建一個Materialise輪播（不是滑塊），但我無法讓圖片改變。 顯示的圖片總是從Flickr拍攝的最后一張照片，所以我覺得有些東西在滾動，但它不會像旋轉木馬那樣繼續旋轉。

我已經在SO和Google上尋找答案，但99％的信息都是特定於Bootstrap的。 我已經在第一個項目中添加了一個活動類，並嘗試從html內部和javascript中初始化輪播，但似乎都沒有幫助。 這是html代碼：

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

和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;
}

謝謝您的幫助！

Answer 1

你應該從carousel div容器中刪除.initialized類，並在for循環之后移動$('#flickrPic').carousel()初始化，如下所示：

   ...

    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

    ...