动态Bootstrap产品滑块

时间:2016-06-16 19:31:58

标签: php twitter-bootstrap

我很了解PHP,但不能使这个滑块动态化。问题是,我必须运行两个foreach循环,但我不想运行两个循环。我只想在一个循环中处理它。

这是代码(我对每个div进行了评论):

<div class="container">           
 <div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row">
         <?php foreach($product as $pro):?>
                    <div class="col-sm-3">
                        <div class="col-item">
                            <div class="photo">
                                <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                            </div>                               
                        </div>
                    </div>
         <?php endforeach;?>
                </div><!--end of row-->
            </div><!--end of item active!-->

            <div class="item">
                <div class="row">   
    <!-- I don't want to run this new loop. I want to handle it in a single loop -->
         <?php foreach($productnew as $pronew):?>                                            
                    <div class="col-sm-3">
                        <div class="col-item">
                            <div class="photo">
                                <img src="http://placehold.it/350x260" class="img-responsive" alt="a" />
                            </div>
                         </div>
                       </div>
                <?php endforaech;?>    
              </div><!-- end item--->
            </div><!-- end of item row-->
        </div><!--end of carousel inner-->

    </div><!--end of carousel example-->
</div><!--end of container-->

2 个答案:

答案 0 :(得分:4)

我认为你正在寻找这样的东西:

<?php
$products = array(); // Products retreived from database

$is_active = true; // Only true for the first iteration
$i = 0;
?>
<div class="carousel-inner">
<?php foreach($products as $p):?>
<?php if ($i % 4 == 0):?>
    <div class="item<?php if ($is_active) echo ' active'?>">
<?php endif?>
        <div class="row">
            <div class="col-sm-3">
                <div class="col-item">
                    <div class="photo">
                        <img src="http://placehold.it/350x260" class="img-responsive" />
                    </div>
                </div>
            </div>
        </div>
<?php if (($i+1) % 4 == 0 || $i == count($products)-1):?>
    </div>
<?php endif?>
<?php
$i++;
if ($is_active) $is_active = false;
endforeach;
?>
</div>

此代码将生成每个包含四个产品的幻灯片,并在第一张幻灯片上设置active类。

答案 1 :(得分:0)

我相信,你的意思是要动态填充旋转木马的图像。显然,您有一个表格,其中存储了轮播图像路径,并且动态填充表格,并在您填充时存储或替换相应的图像。

无论图像数量多少,您都会在循环播放时获取它。并且运行循环一次并不困难。

这是:Stop simple JavaScript slideshow after one loop

对不起,如果我不理解你......