I am trying to make a carousel that uses Twitter Bootstrap default JavaScript and CSS but the images should be fetched from the MySQL database.
The HTML for the carousel that i am trying to make dynamic with php is like this:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
The end result for PHP file that i'm expecting is like this
<div class="carousel-inner">
<?php renderAds(); ?>
</div>
The PHP function that i wrote is like this :
function renderAds(){
$query = queryAds();
$query_exe = mysql_query($query);
if(mysql_num_rows($query_exe) == 0){
echo '<img src="images/sampleAd.jpg" >';
}else{
$numb =1;
$flag =1;
while($fetched_data = mysql_fetch_array($query_exe)){
if($numb == 1){
if($flag == 1){
echo '<div class="active item">';
}else{
echo '<div class="item">';
}
}elseif($numb == 4){
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
echo '</div>';
$numb =0;
}else{
echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
}
$numb++;
$flag++;
}
echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>';
echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>';
}
}
Here, by differing from default carousel of twitter bootstrap, i made each slide with 4 images, i expect that each slide transition contains 4 images instead of as by default the single image for one slide. In HTML it works but when I replace it with my PHP function first slide works but if i press next arrow in carousel whole div collapses.
How can I make it work ?
Note : Here Last image must contain the class marginLast, and the other should have marginTop and pull-left classes.
What I expect to be rendered in html is like this:
<div class="carousel-inner">
<div class="active item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<div class="item">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginTop">
<img src="images/sampleAd.jpg" class="pull-left marginLast">
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
How can i make my PHP function to display result markup like above?
Edit : The Output i get is like this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a>
<a href="sample.com" class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!-- end carousel-inner -->
</div><!-- myCarousel -->
According to markup this should work but it doesn't, the arrow by default if there is no more slide than one should be disabled but it is clickable.