Php 为什么旋转木马中的第一张幻灯片仅显示3项，而其余幻灯片显示4项？

所以我有一个旋转木马，每张幻灯片显示4个项目，唯一的问题是第一张幻灯片只显示3个项目。任何人都知道为什么第一个屏幕上只显示3而不是4。谢谢你的帮助，谢谢

$counter = 1;
if($photo->rowCount() > 0){
    echo'
     <div id="Carousel" class="carousel slide carouselEditor">
    <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
    ';

    foreach($photoSelect as $row){  
        if($counter % 4 == 0) {
            echo '</div><div class="item">';
        }                                                           
        echo'<div class="col-xs-3" style="padding-left:5px;padding-right:5px;"><a class="thumbnail"><img src="'.$row['photo'].'" alt="Backgrounds" style="height:50px;width:75px;"></a></div>';
        $counter++;
    }
    echo'</div>';
    echo'</div><!--.carousel-inner-->                                                               
            <a data-slide="prev" href="#Carousel" class="left carousel-control carouselControlProfile">‹</a>
            <a data-slide="next" href="#Carousel" class="right carousel-control carouselControlProfile">›</a>
        </div><!--.Carousel-->      
    ';
}

$counter=1；
如果（$photo->rowCount（）>0）{
回声'
';
foreach（$photoSelect作为$row）{
如果（$counter%4==0）{
回声'；
}                                                           
回声'
';
}

这是显示内容的页面源打印输出

<div id="Carousel" class="carousel slide carouselEditor">
    <!-- Carousel items -->
    <div class="carousel-inner">
      <div class="item active">
        <div class="col-xs-3" style="padding-left:5px;padding-right:5px;">
         <a class="thumbnail photoDisplay" data-photoDisplay-id="1"><img src="img/ProfileBackgrounds/abstract02.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
        </div>
        <div class="col-xs-3" style="padding-left:5px;padding-right:5px;">
           <a class="thumbnail photoDisplay" data-photoDisplay-id="2"><img src="img/ProfileBackgrounds/abstract03.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
         </div>
        <div class="col-xs-3" style="padding-left:5px;padding-right:5px;"> 
           <a class="thumbnail photoDisplay" data-photoDisplay-id="3"><img src="img/ProfileBackgrounds/butterfly01.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
         </div>
       </div>
       <div class="item">
         <div class="col-xs-3" style="padding-left:5px;padding-right:5px;"> 
           <a class="thumbnail photoDisplay" data-photoDisplay-id="4"><img src="img/ProfileBackgrounds/cartoon01.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
         </div>
         <div class="col-xs-3" style="padding-left:5px;padding-right:5px;"> 
           <a class="thumbnail photoDisplay" data-photoDisplay-id="5"><img src="img/ProfileBackgrounds/cartoon02.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
         </div>
         <div class="col-xs-3" style="padding-left:5px;padding-right:5px;"> 
           <a class="thumbnail photoDisplay" data-photoDisplay-id="6"><img src="img/ProfileBackgrounds/desert01.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
         </div>
         <div class="col-xs-3" style="padding-left:5px;padding-right:5px;"> 
           <a class="thumbnail photoDisplay" data-photoDisplay-id="7"><img src="img/ProfileBackgrounds/leaf01.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
         </div>
       </div>
       <div class="item">
       <div class="col-xs-3" style="padding-left:5px;padding-right:5px;">
         <a class="thumbnail photoDisplay" data-photoDisplay-id="8"><img src="img/ProfileBackgrounds/rain01.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
       </div>
       <div class="col-xs-3" style="padding-left:5px;padding-right:5px;">
         <a class="thumbnail photoDisplay" data-photoDisplay-id="9"><img src="img/ProfileBackgrounds/rosepetals01.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
       </div>
       <div class="col-xs-3" style="padding-left:5px;padding-right:5px;">
         <a class="thumbnail photoDisplay" data-photoDisplay-id="10"><img src="img/ProfileBackgrounds/sunset01.jpg" alt="Backgrounds" style="height:50px;width:75px;"></a>
       </div>
     </div>
  </div><!--.carousel-inner-->                                                              
        <a data-slide="prev" href="#Carousel" class="left carousel-control carouselControlProfile">‹</a>
        <a data-slide="next" href="#Carousel" class="right carousel-control carouselControlProfile">›</a>
    </div><!--.Carousel-->  

可能是因为

$counter=1；

@CarstenLøvboAndersen感谢您的回复，我尝试将计数器更改为0和其他计数器，但不起作用。@Stuckfornow，请将您浏览器上的页面源代码中处理过的代码

$counter

更改为0应该起作用。如果

在
foreach
中。