Bootstrap Carousel下一张幻灯片添加到上一张幻灯片下面

时间:2017-04-29 11:29:52

标签: php html html5 twitter-bootstrap-3 carousel

我添加了bootstrap轮播,其中div item 在下面显示的for循环中创建。我在每个项目 div中都有 9 小图片,该图片会动态填充。现在在旋转木马游戏中我看到div 项目随着活动课程的变化而变化,但我看到的是第一个div 项目内容在第二个项目时也可见 div是活跃的,当第3项div激活时,第1和第2 div项也可见。此外, data-pause =“悬停”无效。

<div class="col-md-4 col-md-offset-4">
<div id="custCarousel" class="carousel slide" data-ride="carousel" data-pause="hover">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#custCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#custCarousel" data-slide-to="1"></li>
      <li data-target="#custCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <?php 
        $counttoken = 9;
        $loop = round($arrloop/9);
        $k=0;

        for($j=0;$j<$loop;$j++)
        {       
            if($k==0){$act='active';}else{$act ='';}
            echo '<div class="item '.$act.'">'; 
                for($i=0; $i<$counttoken;$i++)
                {   
                    $img = $data[$rand_keys[$i]];
                    echo "<a href=".$img[1]."><img src=".$img[2]." alt=".$img[0]." width='100' /></a>";
                }
                $counttoken = $counttoken + 9;
                                $k++;
                echo '</div>';
        }

        ?>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#custCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#custCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

抱歉,我的错误是我在我的PHP代码中更新了for循环。以下是更新的代码,它现在正在完善。

<?php 
        $counttoken = 9;
        $loop = round($arrloop/9);
        $k=0;
        $l=0
        for($j=0;$j<$loop;$j++)
        {       
            if($k==0){$act='active';}else{$act ='';}
            echo '<div class="item '.$act.'">'; 
                for($i=$l; $i<$counttoken;$i++)
                {   
                    $img = $data[$rand_keys[$i]];
                    echo "<a href=".$img[1]."><img src=".$img[2]." alt=".$img[0]." width='100' /></a>";
                }
                $l = $l+9;
                $counttoken = $counttoken + 9;
                                $k++;
                echo '</div>';
        }

        ?>