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

Question

我正在尝试从 Flickr 图片动态构建 Materialise 旋转木马（不是滑块），但我无法更改图片。显示的图片始终是从 Flickr 上截取的最后一张图片，所以我觉得有东西在滚动，但它并没有像轮播一样继续旋转。

我在 SO 和 Google 上寻找答案，但 99% 的信息是 Bootstrap 具体的。我在第一项中添加了一个活动的 class，并尝试从 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

您应该从传送带 div 容器中删除 .initialized class 并像这样在 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

    ...

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

Trouble Initializing a dynamically built materialize carousel

html

javascript

jquery

carousel

materialize