使用Jquery的Bootstrap 4 Dynamic Carousel [英] Bootstrap 4 Dynamic Carousel using Jquery
本文介绍了使用Jquery的Bootstrap 4 Dynamic Carousel的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将图像动态添加到Bootstrap Carousel,但它仅将它们显示在列表中( https://i.imgur.com/8lOOg3w.jpg ).
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).
图像是国家公园服务API网址( https://www.nps.gov/common/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg ).
The images are National Parks Service API urls (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'项上有一个类.
Looks like you need to have a class on the item 'carousel-item' not '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();
});
这篇关于使用Jquery的Bootstrap 4 Dynamic Carousel的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文