Kłopoty Inicjowanie dynamicznie budowanej karuzeli zmaterializowanej

Question

Próbuję dynamicznie budować karuzelę Materialise (NIE suwak) z obrazów Flickr, ale nie udało mi się przekonać do zmiany zdjęć. Obraz, który się pokazuje, jest zawsze ostatnim zdjęciem zrobionym od Flickr, więc czuję, że coś się przewija, ale po prostu nie obraca się tak, jak powinno się robić w karuzeli.

Rozglądałem się za SO i Google, szukając odpowiedzi, ale 99% informacji jest specyficznych dla Bootstrap. Dodałem aktywną klasę do pierwszego elementu i spróbowałem zainicjować karuzelę zarówno z poziomu HTML, jak i javascript, ale żadna z nich nie pomogła. Oto kod html:

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

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

Dzięki za pomoc!

Answer 1

należy usunąć .initialized klasę z pojemnika karuzela div i przesunąć inicjalizacji $('#flickrPic').carousel() po pętli for jak to:

... 

    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 

    ...