Bootstrap Carousel in Foreach Loop

Question

У меня есть карусель с 4 изображениями, как показано на следующем изображении.

Мой усилию дается в следующем.

<div id="thumbCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <?php $i=0; foreach($this->partner_images as $sr){?> 
      <?php if($i==0){ ?><div class="item active"><?php } ?> 
       <?php if($i ==4){ ?><div class="item"><?php }?> 
         <div class="col-xs-3"> 
          <a href="<?php echo $sr['url']; ?>"> 
    <img src="<?php echo BASE_URL?>/partner-images/<?php echo $sr['name']?>" /> 
          </a> 
         </div> 
          <?php if($i==3 or $i==7){ ?></div><?php }?> 
          <?php $i++; } ?> 
        </div> 
        <a class="thumbleft" href="#thumbCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
        <a class="thumbright" href="#thumbCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a> 
    </div> 
</div> 

Проблема:

Проблема заключается в том, что она работает нормально для 4-х изображений и 8 изображений, поэтому, когда там 4 или более картина не отображаются должным образом. Я хочу сделать это автоматически, либо изображения четные или нечетные.

Вопрос: Мой вопрос: как я могу показать 4 или более изображений, как показано на изображениях автоматически?

Answer 1

Я пробую это, и он отлично работает.

<div id="thumbCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <?php $i=0; foreach($this->partner_images as $sr){?> 
     <?php if($i==0){ ?><div class="item active"><?php } ?> 
      <?php if($i % 2 == 0){ ?><div class="item"><?php }?> 
        <div class="col-xs-3"> 
         <a href="<?php echo $sr['url']; ?>"> 
     <img src="<?php echo BASE_URL?>/partner-images/<?php echo $sr['name']?>" /> 
         </a> 
        </div> 
         <?php if($i % 4 != 0){ ?></div><?php }?> 
         <?php $i++; } ?> 
       </div> 
       <a class="thumbleft" href="#thumbCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
       <a class="thumbright" href="#thumbCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span> </a> 
    </div> 
</div>