javascript - 使用 Jquery 的 Bootstrap 4 动态轮播
问题描述
我正在尝试将图像动态添加到 Bootstrap Carousel,但它只是在列表中显示它们(https://i.imgur.com/8lOOg3w.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();
});
推荐阅读
- sql-server - JPA:使用 EclipseLink 和 Microsoft 的 SQLServer 数据库配置 WildFly 8.x JTA 数据源
- azure - “Azure Web 应用”和“Azure 应用服务”有什么区别?
- reactjs - 如何从应用程序组件访问我的反应可重用表格单元格数据
- css - 如何在适用于 Outlook 和 Gmail 电子邮件的模板中设置左侧填充?
- c++ - C++ - 如何保留一些类对象仅由某个类实例化
- google-apps-script - 如何在appsScript getValues()结果中仅格式化一列
- python-3.x - Google 文字转语音 API 音高调整
- c# - 从冻结的计算机中获取 .Net 应用程序的内存转储
- xamarin - 使用 UWP 或通用 Windows 平台进行 Xamarin 文档扫描(仅限设备相机)
- json - 使用可变长度数据和其他 JSON 对象的切片解组 JSON