我试图从Flickr图片动态构建一个Materialise轮播(不是滑块),但我无法让图片改变.显示的图片总是从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;
}
谢谢您的帮助！
解决方法
你应该从carousel div容器中删除.initialized类,并在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
...
