java script loop , carousel image div not working

Question

html carousel static code working fine, but when I append the div using java script loop it showing in vertical line. below is my html static code

<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>

here is my java script code,when I appending the image div it coming up vertically

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);
    }

Shakti Phartiyal · Accepted Answer · 2017-05-09 06:17:46Z

2

What you need to do is initialize the carousel after you have appended the dynamic divs into the carousel class:

add the following code after the for loop in your code:

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

So your code becomes:

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();

answered May 9, 2017 at 6:17

Shakti Phartiyal

6,3043 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

java script loop , carousel image div not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related