首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >试图向旋转木马动态添加图像,但无法正常工作

试图向旋转木马动态添加图像,但无法正常工作
EN

Stack Overflow用户
提问于 2018-11-26 16:47:49
回答 1查看 303关注 0票数 2

我正在使用jquery,引导并尝试创建一个旋转木马。

如果我静态地给出旋转木马项目,那么这个旋转木马就可以工作了,但是如果我试图动态地向旋转木马添加图像,它就失败了。

代码语言:javascript
运行
复制
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. 不透明度被自动设置为零。
  2. 如果浏览器检查元素中的不透明度为1,则可以看到合作伙伴图像,但其分页,而不是在旋转木马中显示。

3.如果我静态地设置旋转木马项,一切都正常。

EN

回答 1

Stack Overflow用户

发布于 2018-11-26 17:10:40

在添加所有需要的项目后,请尝试手动初始化旋转木马:

代码语言:javascript
运行
复制
$('.carousel').carousel();

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

通过javascript部分。

另外,为了确保您的旋转木马不会在前面初始化,请将旋转木马类替换为不同的内容:“旋转木马-定制”。使用该引导程序,将不会使用html标记自动初始化它。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53485610

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档