我正在尝试将图像动态添加到 Bootstrap Carousel,但它只是将它们显示在列表中 ( /image/qOCBe.jpg )。
这些图像是国家公园服务 API 网址 (https://www.nps.gov/common/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg)。
这是 HTML
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
和JS
$(document).ready(function(){
for(let j = 0; j < parkInfo.data[i].images.length; j++) {
$('<div class="item"><img src="'+parkInfo.data[i].images[j].url+'" width="50%"> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="'+j+'"></li>').appendTo('.carousel-indicators')
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel').carousel();
});
最佳答案
看起来您需要对项目“carousel-item”而不是“item”进行分类。
https://jsfiddle.net/orb9945u/
$(document).ready(function(){
for(let j = 0; j < 5; j++) {
$('<div class="carousel-item"><img
src="https://loremflickr.com/320/240" width="50%">
</div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="'+j+'">
</li>').appendTo('.carousel-indicators')
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel').carousel();
});
关于javascript - 使用 Jquery 的 Bootstrap 4 动态轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50343760/