Bootstrap 4轮播在jQuery的循环中添加项目不起作用
Posted
技术标签:
【中文标题】Bootstrap 4轮播在jQuery的循环中添加项目不起作用【英文标题】：Bootstrap 4 carousel adding items in a loop from jQuery not working 【发布时间】：2021-01-31 10:46:00 【问题描述】：我尝试将一些图像循环添加到引导程序 4 轮播。我尝试使用以下似乎不起作用的代码。但是，如果我为所有项目手动添加相同的项目（使用来自 jQuery 的相同 html sn-p），它就可以工作。
<body>
<div class="container-fluid px-0">
<div class="header">
<span>Some Header<span>
</div>
<div id="myImage" class="carousel slide" data-ride="carousel">
<div class="carousel-inner bg-info" role="listbox">
</div>
<a class="carousel-control-prev" href="#myImage" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myImage" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function()
var totalItems = 3;
for(var i = 1 ; i <= totalItems ; i++)
$('<div class="carousel-item"><div class="d-flex align-items-center justify-content-center min-vh-100"><img src="img/myimg'+i+'.jpg"></div></div>').appendTo('.carousel-inner');
$('.carousel-item').first().addClass('active');
$('.carousel').carousel(
interval: false,
);
);
</script>
</body>
我按照here提到的答案。
为了更简单的目的，我用上面的代码here 创建了小提琴。但是在这个小提琴中，我正在获取一个数组并从数组中添加，因为上传的图像具有随机 URL。令人惊讶的是，这很有效。
在原始代码中，我有可用的图像路径，因此不使用数组。如上所述，我正在使用带有来自循环的数字的图像路径。
谁能指出我在这里做错了什么？
【问题讨论】：
【参考方案1】：其实一切看起来都很好，可能是图片路径或者img ext有错误，如果img文件夹在root，试试这个； "
【讨论】：
以上是关于Bootstrap 4轮播在jQuery的循环中添加项目不起作用的主要内容，如果未能解决你的问题，请参考以下文章
页面加载后，如何使 Bootstrap js 轮播自动循环？