समस्या एक गतिशील रूप से निर्मित भौतिक कारियोसेल

Question

प्रारंभ करना मैं फ़्लिकर चित्रों से गतिशील रूप से एक मटेरियलाइज कैरोसेल (स्लाइडर नहीं) बनाने का प्रयास कर रहा हूं, लेकिन मैं चित्रों को बदलने में सक्षम नहीं हूं। चित्र जो दिखाता है वह हमेशा फ्लिकर से ली गई आखिरी तस्वीर है, इसलिए मुझे लगता है कि कुछ स्क्रॉलिंग है, लेकिन यह कैरोसेल के रास्ते को घुमाने के लिए जारी नहीं है।

मैंने उत्तर के लिए SO और Google को देखा है, लेकिन 99% जानकारी बूटस्ट्रैप विशिष्ट है। मैंने पहले आइटम में एक सक्रिय कक्षा को जोड़ा है और एचटीएमएल के अंदर और जावास्क्रिप्ट से दोनों कैरोसेल को शुरू करने की कोशिश की है, लेकिन न ही मदद करने लगती है। यहाँ एचटीएमएल कोड है:

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

और जे एस:

$.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 और इस तरह पाश के लिए के बाद $('#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 

    ...