我正在使用jquery,引导并尝试创建一个旋转木马。
如果我静态地给出旋转木马项目,那么这个旋转木马就可以工作了,但是如果我试图动态地向旋转木马添加图像,它就失败了。
jQuery script:
function loadPartners(section) {
var partners = section.partners;
// partners contain list of URL where the images are located.
$.each(partners, function( i, val ) {
console.log("success partners val: " + val.url);
var markup = "<div class=carousel-item> <div class=\"listing-item compact\" ><a class=listing-img-container><div class=listing-img-content><span class=listing-compact-title> Day-View </span></div><img src=" + val.url+ "></a></div></div>";
// Adding carousel item to carousel
$('#partners #partners1 #partners2 #partners3').append(markup);
});
}
HMTL code.
<div id = "partners" class="container" style="opacity: 1;">
<div id = "partners1" class="row" style="opacity: 1;">
<div class="col-md-12">
<h4 class="headline margin-top-70 margin-bottom-30">Partners</h4>
</div>
<!-- Carousel -->
<div id = "partners2" class="col-md-8">
<div id = "partners3" class="carousel">
<!-- items will be added here -->
</div>
</div>
<!-- Carousel / End -->
</div>
</div>
意见:
3.如果我静态地设置旋转木马项,一切都正常。
发布于 2018-11-26 17:10:40
在添加所有需要的项目后,请尝试手动初始化旋转木马:
$('.carousel').carousel();
它可以在引导文档中找到:https://getbootstrap.com/docs/4.0/components/carousel/
通过javascript部分。
另外,为了确保您的旋转木马不会在前面初始化,请将旋转木马类替换为不同的内容:“旋转木马-定制”。使用该引导程序,将不会使用html标记自动初始化它。
https://stackoverflow.com/questions/53485610
复制相似问题