问题初始化一个动态构建的物化旋转木马

Question

我试图从Flickr图片动态构建一个物化旋转木马（不是滑块），但我一直无法获取要更改的图片。显示的图片始终是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

您应该删除.initialized类从传送带上的div容器和之后的移动$('#flickrPic').carousel()初始化for循环是这样的：

... 

    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 

    ...