Twiiter Bootstrap carousel making dynamic with PHP

Question

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">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a>';
        echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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.

Answer 1

I solved it as :

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <?php $slider = $guest->getAllData("slider"); ?>
            <?php foreach( $slider as $slide) : ?>
                <li data-target="#myCarousel" data-slide-to="<?=$slide['id']; ?>" class=""></li>
            <?php endforeach; ?>
        </ol>
        <div class="carousel-inner">
            <?php foreach($slider as $slide) : ?>
                <div class="item ">
                    <img src="images/slider/<?=$slide['img']; ?>" alt="Los Angeles">
                </div>
            <?php endforeach; ?>
        </div>

        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

and add JS code:

$('.carousel-indicators>li:first-child').addClass('active');
$('.carousel-inner>div:first-child').addClass('active');

Answer 2

<div class="carousel-inner">

<?php 
// Twitter Bootstrap Carousel.
$caseStudies = get_posts(array(
  'numberposts' => 12,
  'post_type'   => 'case-study',
  'meta_key'    => 'show_case_study_home',
  'meta_value'  => 'yes',
  'post_status' => 'publish',
));

$open = 0;
$close = 1;
$active = 0;
$didClose = false;
foreach($caseStudies as $caseStudy){

  $image  = get_field('image_home', $caseStudy->ID);
  $header = get_field('header_home', $caseStudy->ID);
  $intro  = get_field('intro_home', $caseStudy->ID);

  $activeCss = "";

    if(($open)%4 == 0) {
      if ($active == 0) $activeCss = " active";
     echo '<div class="item'. $activeCss .'"><ul class="thumbnails">';
    }
?>

<li class="span3">
  <div class="case-study">
  <img src="<?php echo $image['url']; ?>" alt="">
  <a href="<?php echo get_permalink($caseStudy->ID); ?>" class="btn-more read-hover">Read More</a>
  <h4><?php echo $header; ?></h4>
  <p><?php echo $intro; ?></p>
  </div>
</li>

<?
    if(($close)%4 == 0) {
     echo "<ul></div>";
     $didClose = true; // Maybe the carousel has less than 4 items ...
    }

  $open++;
  $close++;
  $active++;
}
if($didClose == false) echo "</div></div>"; // If has less than 4 items in the carousel close the tags.
?>

</div><!--/.caroussel-inner -->

Answer 3

I think i came out with answer for my own question, even though all the above answers gave me many ideas. Thank you all

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;
        echo '<div class="carousel-inner">';
        while($fetched_data = mysql_fetch_array($query_exe)){
            if($numb == 1){
                if($flag == 1){
                    echo '<div class="active item">';
                }else{
                    echo '<div class="item">';
                }
                echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
            }elseif($numb == 4){
                echo '<a target="_blank" href="http://'.$fetched_data['url'].'"  class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>';
                $numb = 0;
                echo '</div>';
            }else{
                echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>';
            }

            $numb++;
            $flag++;
        }

        if($numb > 1 && $numb < 4 ){
            echo '</div>';
            echo '</div>';
        }elseif($numb == 1){
            echo '</div>';
        }elseif($numb == 4){
            echo '</div>';
            echo '</div>';
        }

        echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>';
        echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>';
    }
}

Answer 4

Have you MySQL query return just an array. That way, your query's reusable (could be then made into a function) and you can render the data however you see fit.

<?php
$mysqli = new mysqli('localhost', 'username', 'password', 'database');

$sql = "SELECT * FROM table";
$res = $mysqli->query($sql);

$rows = array();
while ($row = $res->fetch_assoc()) {
    $rows[] = $row;
}
?>
<div class="carousel">
  <div class="carousel-inner">
<?php $i = 1; ?>
<?php foreach ($rows as $row): ?>
<?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
    <div class="<?php echo $item_class; ?>">
      <a href="<?php echo $row['url']; ?>">
        <img src="<?php echo $row['image']; ?>" alt="<?php echo $row['title']; ?>" />
      </a>
    </div>
<?php $i++; ?>
<?php endforeach; ?>
  </div>
</div>

You'll obviously need to change the database query, as well as the values then used in the foreach loop. I've also used the mysqli functions, as the mysql functions are now deprecated in favour of MySQLi (MySQL improved).