初始化动态构建的实体转盘时出现问题

Trouble Initializing a dynamically built materialize carousel

本文关键字：问题 动态 构建 实体 初始化      更新时间：2023-09-26

我正试图从Flickr图片中动态构建一个Materialize转盘（而不是滑块），但我一直无法更改图片。显示的图片总是从Flickr上拍摄的最后一张图片，所以我觉得有些东西在滚动，但它并没有像旋转木马那样继续旋转。

我在SO和谷歌上寻找答案，但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;
}

谢谢你的帮助！

您应该从carouseldiv容器中删除.sitialized类，并在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
    ...
相关文章：