從第3個項目開始，每4個項目添加一個div？

Question

有點背景......我在WordPress中創建了一個自定義帖子類型，其中包含精選圖片以及高級自定義字段字段中的圖片庫。我正在基於此代碼創建一個Bootstrap縮略圖滑塊：http://codepen.io/RetinaInc/pen/rxksh/

這一切都適用於上部分。我可以輕鬆地將精選圖像作爲第一個應用了「活動」類的項目，然後在沒有活動類的項目的圖庫圖像的foreach循環中運行。完善。真棒。

我遇到的問題是滑塊縮略圖。我已經有了第一個「活躍」行中的第一個項目 - 再次，精選圖片。但是我需要在每4個項目後添加一個沒有「主動」類的新行。但在這種情況下，這意味着我只能擁有畫廊的前三項，因爲第一項是精選圖像。然後後我需要迭代每4個項目，添加沒有「活動」類的行div的前3個圖庫項目。看到我的困境？我敢肯定，你們都不是兩難。我的數學技能有點吸引人，而模數仍然讓我感到害怕，因爲我不太瞭解它。

下面的代碼，因爲我有現在（我放棄了模數的事情昨晚深夜，這樣滾動條區域是非常簡單，只是普通的HTML現在）：

<?php 
<!-- Begin Carousel--> 
<div class="container-fluid"> 
    <div class="row"> 

     <div id="carousel" class="plan-carousel slide" data-ride="carousel"> 
      <div class="carousel-inner"> 

       <?php 
        $thumbnail_id = get_post_thumbnail_id(); 
        $thumbnail_url = wp_get_attachment_image_src($attachment_id, $size='speight-plan'); 
        $thumbnail_meta = get_post_meta($thumbnail_id, '_wp_attatchment_image_alt', true); 
      ?> 

       <div class="item active"> 
        <img src="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'speight-plan')[0]; ?>"> 
       </div> 

       <?php 
        $images = get_field('site_photos'); 
        $size = 'speight-plan'; 

         if($images): 
          foreach($images as $image): 
          $thumb = $image['sizes'][ $size ]; 
       ?> 

       <div class="item"> 
        <img src="<?php echo $thumb; ?>"> 
       </div> 

          <?php endforeach; 
         endif; 
       ?> 

      </div> 
     </div> 

     <!-- Indicators --> 

     <div class="clearfix"> 

     <div id="thumbcarousel" class="plan-carousel slide" data-interval="false"> 
      <div class="carousel-inner"> 

       <div class="item active"> 
        <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'speight-plan')[0]; ?>"></div> 

        <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div> 
        <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div> 
        <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="image.jpg"></div> 
       </div> 

       <div class="item"> 
        <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div> 
        <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div> 
        <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="image.jpg" style="border-right-color: white; border-right-width: 1px; border-right-style: solid;"></div> 
        <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="image.jpg"></div> 
       </div><!-- /item --> 

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

      <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </a> 

      <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div><!-- /thumbcarousel --> 

    </div> 
</div> 

<?php  
    wp_reset_postdata(); 
    wp_reset_query(); 
?> 

我也想補充一點，我遇到的另一個問題是如何在縮略圖滑塊中獲取「data-slide-to」的項目編號值。

當然，如果我可以完全消除特色圖像並且只有圖庫字段，這將會更容易。但這是客戶想要的。

Answer 1

爲什麼你不只是做這樣的事情，添加計數器並檢查每4個項目：

if($images): 
    $i = 0; 
    foreach($images as $image): 
    $thumb = $image['sizes'][ $size ]; 
    ?> 

    <div class="item"> 
     <img src="<?php echo $thumb; ?>"> 
    </div> 

    <?php 
    $i++; 
    if ($i%4 == 0): ?> 
     <div class = "item"> 

     </div> 
    <?php endif; 
    endforeach; 
endif; ?>