Bootstrap 3 dynamic carousel doesnt slide - php

Question

Please help. when i use the default carousel,
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
slide does work, but when i while looped the
<div class="item active">...</div> so the images will be dynamic, it doesnt slide anymore. instead, the images just stacked each other as seen here:
image here
Here is my code:
<!-- carousel -->
<div id="myCarousel" class="carousel slide " data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$x = new DB();
$y= $x->selectWithCount(0,'tblimagecarousel',null,null);
// var_dump($y);
$numofimages = $y->fetchColumn();
// echo $numofimages;
for($x=0;$x<$numofimages;$x++)
{
echo "<li data-target='#myCarousel' data-slide-to='{$x}'></li>";
}
?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$x = new DB();
$y= $x->select(0,'*','tblimagecarousel',null,null);
while($row = $y->fetchObject()){
echo"
<div class='item active'>
<img src='../assets/images/".$row->img."' alt='".$row->title."' width='100%' height='345'>
<div class='carousel-caption'>
<h3>".$row->title."</h3>
<p>".$row->description."</p>
</div>
</div>";
}
?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" >
<span><img src="../assets/images/ico_prev.png" height="50px" style="margin-top:500%"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span><img src="../assets/images/ico_next.png" height="50px" style="margin-top:500%"></span>
<span class="sr-only">Next</span>
</a>
</div>

Answer 1

I looked at your code your issue is in your loop
the carousel can only have ONE item with the active class at a time (if you only want one to show)
this does not contain the php portion you will have to construct your loop to NOT add the active class (possibly add the active class to the 1st item after)
HTML
<div class="item">
<img src="../assets/images/image1.png" alt="Image one" width="100%" height="345">
<div class="carousel-caption">
<h3>Image one</h3>
<p>Image Description 1</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image2.png" alt="Image two" width="100%" height="345">
<div class="carousel-caption">
<h3>Image two</h3>
<p>Image Description 2</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image3.png" alt="Image three" width="100%" height="345">
<div class="carousel-caption">
<h3>Image three</h3>
<p>Image Description 3</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image4.png" alt="Image four" width="100%" height="345">
<div class="carousel-caption">
<h3>Image four</h3>
<p>Image Description 4</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span><img src="../assets/images/ico_prev.png" height="50px" ></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span><img src="../assets/images/ico_next.png" height="50px" ></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
body{background-color:#ccc;}
.item{height:400px;}
js
$(document).ready(function(){
$('#myCarousel').carousel();
//this will add the active class to the first item
$('.carousel-inner div.item:first-of-type' ).addClass( "active" );
})
You can view a fiddle HERE