[英]Bootstrap 4 Dynamic Carousel using Jquery
I'm trying to add images dynamically to a Bootstrap Carousel but it just shows them in a list ( https://i.imgur.com/8lOOg3w.jpg ).我正在尝试将图像动态添加到 Bootstrap Carousel,但它只是在列表中显示它们 ( https://i.imgur.com/8lOOg3w.jpg )。
The images are National Parks Service API urls ( https://www.nps.gov/common/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg ).图片是国家公园服务 API 网址 ( https://www.nps.gov/common/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg )。
Here's the HTML这是 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>
and JS和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();
});
Looks like you need to have a class on the item 'carousel-item' not 'item'. 看起来您需要在“轮播项目”而不是“项目”上开设一个课程。
https://jsfiddle.net/orb9945u/ 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();
});
Work for me为我工作
for(let j = 0; j < data.length; j++) { $('<div class="item"><img src="'+data[j].imageName+'"></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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.