我正在尝试从 Flickr 图片动态构建 Materialise 轮播(不是 slider ),但我无法更改图片。显示的图片始终是从 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
...
关于javascript - 无法初始化动态构建的物化轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34404127/