Question

html carousel静态代码工作正常，但是当我使用java脚本循环附加div时，它显示在垂直行中。下面是我的html静态代码

<section id="feature" class="">
      <div class="container">
        <div class="row">
        <div class="col-md-12">
        <div class="rest-head">
          <p><span class="h-3 gray">Name</span></p>
          <p><span class="h-4 gray">text</span></p>
        </div>

          <div class="carousel">
            <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a>
            <div class="slide-footer">
            <span><h5 class="nomargin ellipsis">text</h5></span>
            <h5 class="pull-left">text</h5>
            <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5>
            </div>
            </div>
            <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a>
            <div class="slide-footer">
            <span><h5 class="nomargin ellipsis">text</h5></span>
            <h5 class="pull-left">text</h5>
            <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5>
            </div>
            </div>
            <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a>
            <div class="slide-footer">
            <span><h5 class="nomargin ellipsis">text</h5></span>
            <h5 class="pull-left">text</h5>
            <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5>
            </div>
            </div>
            <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a>
            <div class="slide-footer">
            <span><h5 class="nomargin ellipsis">text</h5></span>
            <h5 class="pull-left">text</h5>
            <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5>
            </div>
            </div>
            <div class="carousel-cell"><a href=""><img src="http://placehold.it/350x150" /></a>
            <div class="slide-footer">
            <span><h5 class="nomargin ellipsis">text</h5></span>
            <h5 class="pull-left">text</h5>
            <h5 class="pull-right"><strong><i class="fa fa-inr"></i>price</strong></h5>
            </div>
            </div>
          </div>
        </div>
        </div>
        <hr>
      </div>
    </section>

这是我的java脚本代码，当我将图像div附加到垂直方向时

for (i = 0; i < object.length; i++) {
    returnResult='<div class="carousel-cell">';
    returnResult+='<a href=""><img src="http://placehold.it/350x150"/></a>';
    returnResult+='<div class="slide-footer"><span><h5 class="nomargin 
    ellipsis">';
    returnResult+= name1;
    returnResult+='</h5></span><h5 class="pull-left">'+name2+'%</h5>';
    returnResult+='<h5 class="pull-right"><strong><i class="fa fa-inr">';
    returnResult+=name3+'</strong></h5></div></div></div>'; 
    $(".carousel").append(returnResult);
    }

Answer 1

您需要做的是在将动态div添加到轮播类后初始化轮播：

在代码中的for循环后添加以下代码：

$(".carousel").carousel();

所以你的代码变成了：

for (i = 0; i < object.length; i++) {
    returnResult='<div class="carousel-cell">';
    returnResult+='<a href=""><img src="http://placehold.it/350x150"/></a>';
    returnResult+='<div class="slide-footer"><span><h5 class="nomargin 
    ellipsis">';
    returnResult+= name1;
    returnResult+='</h5></span><h5 class="pull-left">'+name2+'%</h5>';
    returnResult+='<h5 class="pull-right"><strong><i class="fa fa-inr">';
    returnResult+=name3+'</strong></h5></div></div></div>'; 
    $(".carousel").append(returnResult);
    }
$(".carousel").carousel();

java脚本循环，轮播图像div不工作

1 个答案: