bootstrap 2.3 multiple images / items in carousel

carousel, css, html, php, twitter-bootstrap

Solution

Updated:

As per the way Bootstrap 2.3 carousel works, multiple items like the way you have done won't show 4 items in a row and only one `.item` class can have an `.active` class to it, so here's what we would do:

<div class="item active">
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
</div>

<div class="item">
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
</div>

That's how we are going to structure your elements to look like. So code in:

<!-- code follows -->
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;

while ($i < 10)
    {
    if ($i == 1)
        {
        echo '<div class="item active">';
        }
    elseif ($next_item == true)
        {
        echo '<div class="item">';
        }

?>
                    <div class="span3 mef-3">
                    <!-- code follows -->
                    </div>
<?php
$next_item = false;

if ($i % 4 == 0)
    {
    echo '</div>';
    $next_item = true;
    }

$i++;
}
?>

Also, since you name your carousel as `id=myCarousel`, your prev and next button's `href` should be `href="#myCarousel"` and not `href="#textCarousel"`.

Here's a demo of what it looks like.

Problem

I am working on a PHP based website which is using Twitter Bootstrap 2. I am pulling the users from MySQL database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using `while` loop. This is what my carousel looks like at present, as you will notice user 5 is not supposed to appear the way it is right now and is only supposed to appear when i click on arrow on right side of the carousel. This is what my php code looks like ``` <div class="carousel slide" id="myCarousel"> <h4 class="carousel-title">Text title</h4> <div class="carousel-inner"> <?php while ($row = $query->fetch(PDO::FETCH_ASSOC)) { ?> <div class="item active"> <div class="span3 mef-3"> <div class="about portrait"> <div class="tooltip-demo"> <a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip" data-title=""> <img class="img-circle" width="180" height="200" data-src="holder.js/360x270" alt="270x280" style="" src="assets/img/adviser.png"></a> </div> <div class="caption"> <h3 class="name" style="text-align: center"><?php echo $row['fname']." ".$row['lname'] ?></h3> <p style="text-align: center"> Specialities</p> </div> <div class="mefradio"> <input type="radio" name="adviser" id="adviser" value='<?php echo $row['user_id']."|".$row['fname']." ".$row['lname'] ?>'><br> </div> </div> </div> </div> <?php } ?> </div> <a data-slide="prev" href="#textCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#textCarousel" class="right carousel-control">›</a> </div> ``` I will really appreciate any guidance on how to get it to work UPDATE This is the updated code that is working, thanks to @I can Has Kittenz ``` <div class="carousel slide" id="myCarousel"> <h4 class="carousel-title">Text title</h4> <div class="carousel-inner"> <?php $i = 1; $next_item = true; while ($row = $query->fetch(PDO::FETCH_ASSOC)) { if ($i == 1) { echo '<div class="item active">'; } elseif ($next_item == true) { echo '<div class="item">'; } ?> <div class="span3 mef-3"> <div class="about portrait"> <div class="tooltip-demo"> <a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip" data-title=""> <img class="img-circle" width="180" height="200" data-src="holder.js/360x270" alt="270x280" style="" src="assets/img/adviser.png"></a> </div> <div class="caption"> <h3 class="name" style="text-align: center"><?php echo $row['fname'] . " " . $row['lname'] ?></h3> <p style="text-align: center"> Specialities</p> </div> <div class="mefradio"> <input type="radio" name="adviser" id="adviser" value='<?php echo $row['user_id'] . "|" . $row['fname'] . " " . $row['lname'] ?>'><br> </div> </div> </div> <?php $next_item = false; if ($i % 4 == 0) { echo '</div>'; $next_item = true; } $i++; } ?> </div> <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> </div> ``` The JS that needs to go with this is as following ``` <script> $(document).ready(function(){ $('#myCarousel').carousel({ pause: true, interval: false }); }); $('#myCarousel').on('slid', '', function() { var $this = $(this); $this.find('.carousel-control').show(); if($('.carousel-inner .item:first').hasClass('active')) { $this.find('.left.carousel-control').hide(); } else if($('.carousel-inner .item:last').hasClass('active')) { $this.find('.right.carousel-control').hide(); } }); </script> ```

Original source

Related problems