Foreach循环中的Bootstrap Carousel

时间:2016-03-18 11:46:03

标签: php twitter-bootstrap twitter-bootstrap-3 foreach

我的旋转木马有4张图片,如下图所示。

enter image description here

我的努力如下。

<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个或更多图像?

1 个答案:

答案 0 :(得分:2)

我试试这个并且工作正常。

<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>