title: bootstrap 2.3 multiple images / items in carousel
body: <p>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 <code>while</code> loop.</p>
  
  <p>This is what my carousel looks like at present, as you will notice <strong>user 5</strong> 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.
  <img src="https://i.stack.imgur.com/icevm.png" alt="enter image description here"></p>
  
  <p>This is what my php code looks like</p>
  
  <pre><code>&lt;div class="carousel slide" id="myCarousel"&gt;
              &lt;h4 class="carousel-title"&gt;Text title&lt;/h4&gt;
              &lt;div class="carousel-inner"&gt;
          &lt;?php
                  while ($row = $query-&gt;fetch(PDO::FETCH_ASSOC)) {
                      ?&gt;
                      &lt;div class="item active"&gt;
                          &lt;div class="span3 mef-3"&gt;
                              &lt;div class="about portrait"&gt;
                                  &lt;div class="tooltip-demo"&gt;
                                      &lt;a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
                                         data-title=""&gt;
                                          &lt;img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
                                               alt="270x280"
                                               style="" src="assets/img/adviser.png"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="caption"&gt;
                                      &lt;h3 class="name" style="text-align: center"&gt;&lt;?php echo $row['fname']." ".$row['lname'] ?&gt;&lt;/h3&gt;
  
                                      &lt;p style="text-align: center"&gt;
                                          Specialities&lt;/p&gt;
                                  &lt;/div&gt;
                                  &lt;div class="mefradio"&gt;
                                      &lt;input type="radio" name="adviser" id="adviser" value='&lt;?php echo $row['user_id']."|".$row['fname']." ".$row['lname'] ?&gt;'&gt;&lt;br&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;?php
                  }
                  ?&gt;
              &lt;/div&gt;
              &lt;a data-slide="prev" href="#textCarousel" class="left carousel-control"&gt;‹&lt;/a&gt;
              &lt;a data-slide="next" href="#textCarousel" class="right carousel-control"&gt;›&lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I will really appreciate any guidance on how to get it to work</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is the updated code that is working, thanks to <em>@I can Has Kittenz</em></p>
  
  <pre><code>&lt;div class="carousel slide" id="myCarousel"&gt;
              &lt;h4 class="carousel-title"&gt;Text title&lt;/h4&gt;
  
              &lt;div class="carousel-inner"&gt;
                  &lt;?php
                  $i = 1;
                  $next_item = true;
                  while ($row = $query-&gt;fetch(PDO::FETCH_ASSOC)) {
                  if ($i == 1) {
                      echo '&lt;div class="item active"&gt;';
                  } elseif ($next_item == true) {
                      echo '&lt;div class="item"&gt;';
                  }
  
                  ?&gt;
  
                  &lt;div class="span3 mef-3"&gt;
                      &lt;div class="about portrait"&gt;
                          &lt;div class="tooltip-demo"&gt;
                              &lt;a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
                                 data-title=""&gt;
                                  &lt;img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
                                       alt="270x280"
                                       style="" src="assets/img/adviser.png"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="caption"&gt;
                              &lt;h3 class="name"
                                  style="text-align: center"&gt;&lt;?php echo $row['fname'] . " " . $row['lname'] ?&gt;&lt;/h3&gt;
  
                              &lt;p style="text-align: center"&gt;
                                  Specialities&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class="mefradio"&gt;
                              &lt;input type="radio" name="adviser" id="adviser"
                                     value='&lt;?php echo $row['user_id'] . "|" . $row['fname'] . " " . $row['lname'] ?&gt;'&gt;&lt;br&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
              &lt;?php
              $next_item = false;
  
              if ($i % 4 == 0) {
                  echo '&lt;/div&gt;';
                  $next_item = true;
              }
  
              $i++;
              }
              ?&gt;
          &lt;/div&gt;
  
          &lt;a data-slide="prev" href="#myCarousel" class="left carousel-control"&gt;‹&lt;/a&gt;
          &lt;a data-slide="next" href="#myCarousel" class="right carousel-control"&gt;›&lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The JS that needs to go with this is as following</p>
  
  <pre><code>&lt;script&gt;
  
      $(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();
          }
  
      });
  &lt;/script&gt;
  </code></pre>