尝试动态地将图像添加到轮播中不起作用答案

【问题标题】：Trying to add images to carousel dynamically not working尝试动态地将图像添加到轮播中不起作用
【发布时间】：2018-11-26 16:47:49
【问题描述】：

我正在使用 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>

观察：

不透明度自动设置为零。
如果在浏览器检查元素中将不透明度设为 1，我会看到合作伙伴图像可见但它是分页的，而不是出现在轮播中。

3.如果我静态设置轮播项目，一切正常。

【问题讨论】：

找到了类似的帖子，看看stackoverflow.com/questions/50343760/…

标签： javascript jquery html css carousel

【解决方案1】：

在您添加所有需要的项目后，请尝试手动初始化轮播：

$('.carousel').carousel();

可以在引导文档中找到：https://getbootstrap.com/docs/4.0/components/carousel/

通过 javascript 部分。

还要确保您的轮播不会提前初始化，将轮播类替换为不同的内容，例如：“carousel-custom”。使用该引导程序将不会使用您的 html 标记自动对其进行初始化。

【讨论】：