CODEWITHSUNDEEP
phpjquerycsstwitter-bootstrap
Jordyn
Jordyn

Reputation: 1133

Dynamic bootstrap carousel

I’m trying to get bootstrap carousel work dynamically using PHP. I’m not using the normal carousel which slid one image at a time. I’m using the one have multiple images inside each item class (in my case 4 images inside one item).

Ex: http://bootsnipp.com/snippets/featured/simple-carousel

I can get it to work if I use two queries I’m wondering whether I can do it in a single query.

My code:

<div id="Carousel" class="carousel slide" data-interval="false">
  <ol class="carousel-indicators">
    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
    <li data-target="#Carousel" data-slide-to="1"></li>
    <li data-target="#Carousel" data-slide-to="2"></li>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="item active">
      <?php
if($query1 = $mysqli->query("SELECT * FROM posts LIMIT 0, 4")){
    while($row1 = mysqli_fetch_array($query1)){ 

?>
      <div class="col-md-3"><a href="<?php echo $row1['link'];?>"> <img class="img-thubs" src="<?php echo $row1['image'];?>" alt="<?php echo $row1['title'];?>"></a> <a href="<?php echo $row1['link'];?>">
        <h4 class="col-more-title"><?php echo $row1['title'];?></h4>
        </a> </div>
      <?php
    }
    $query1->close();

}
?>
    </div>
    <!--.item-->
    <div class="item">
      <?php

if($query2 = $mysqli->query("SELECT * FROM posts LIMIT LIMIT 5, 9")){
    while($row2 = mysqli_fetch_array($query2)){ 

?>
      <div class="col-md-3"><a href="<?php echo $row2['link'];?>"> <img class="img-thubs" src="<?php echo $row2['image'];?>" alt="<?php echo $row2['title'];?>"></a> <a href="<?php echo $row2['link'];?>">
        <h4 class="col-more-title"><?php echo $row2['title'];?></h4>
        </a> </div>
      >
      <?php
}
    $query2->close();

}
?>
    </div>
    <!--.item--> 

    <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
  <!--.Carousel--> 

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

Upvotes: 2

Views: 2653

Answers (1)

Zast
Zast

Reputation: 502

You know the size of the required loops. You need 2 separate loops, with the outer running twice. the inner running 5 times. Do a single query to get all of the data, then on the inner loop get the values from the mysqli_fetch_array($query2);

Some thing like:

 for( $i = 0; $i < 2; $i ++){
      print '<div class="item">';
      for( $z = 0; $z < 5; $z ++ ){
           $row2 = mysqli_fetch_array($query2);
           //do what ever you want with the data!!!
           print '<div class="col-md-3">';
           print '<a href="' . $row2['link'] . '">';
           print '<img class="img-thubs" src="' . $row2['image'] . '" alt="' . $row2['title'] . '"></a> ';
           print '<a href="' . $row2['link'] . '"><h4 class="col-more-title">' . $row2['title'] . '</h4></a> </div>';
      }
      print '</div>';
 }

Upvotes: 1

Related Questions