从第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; ?>