bootstrap 2.3 轮播中的多个图像/项目

Question

我正在开发一个使用 Twitter Bootstrap 2 的基于 PHP 的网站。我正在从 MySQL 数据库中提取用户并尝试在屏幕上的多个帧/轮播项目中显示它们，而不是使用 while 的单个项目循环。

这是我的轮播目前的样子，你会注意到 用户 5 不应该像现在这样出现，只有当我点击右侧的箭头时才会出现旋转木马的一侧。

这就是我的 php 代码的样子

<div class="carousel slide" id="myCarousel">
            <h4 class="carousel-title">Text title</h4>
            <div class="carousel-inner">
        <?php
                while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
                    ?>
                    <div class="item active">
                        <div class="span3 mef-3">
                            <div class="about portrait">
                                <div class="tooltip-demo">
                                    <a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
                                       data-title="">
                                        <img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
                                             alt="270x280"
                                             style="" src="assets/img/adviser.png"></a>
                                </div>
                                <div class="caption">
                                    <h3 class="name" style="text-align: center"><?php echo $row['fname']." ".$row['lname'] ?></h3>

                                    <p style="text-align: center">
                                        Specialities</p>
                                </div>
                                <div class="mefradio">
                                    <input type="radio" name="adviser" id="adviser" value='<?php echo $row['user_id']."|".$row['fname']." ".$row['lname'] ?>'><br>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php
                }
                ?>
            </div>
            <a data-slide="prev" href="#textCarousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#textCarousel" class="right carousel-control">›</a>
        </div>

我将非常感谢有关如何使其工作的任何指导

更新

感谢@I can Has Kittenz

，这是正在运行的更新代码

<div class="carousel slide" id="myCarousel">
            <h4 class="carousel-title">Text title</h4>

            <div class="carousel-inner">
                <?php
                $i = 1;
                $next_item = true;
                while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
                if ($i == 1) {
                    echo '<div class="item active">';
                } elseif ($next_item == true) {
                    echo '<div class="item">';
                }

                ?>

                <div class="span3 mef-3">
                    <div class="about portrait">
                        <div class="tooltip-demo">
                            <a href="#" rel="tooltip" data-placement="top" data-toggle="tooltip"
                               data-title="">
                                <img class="img-circle" width="180" height="200" data-src="holder.js/360x270"
                                     alt="270x280"
                                     style="" src="assets/img/adviser.png"></a>
                        </div>
                        <div class="caption">
                            <h3 class="name"
                                style="text-align: center"><?php echo $row['fname'] . " " . $row['lname'] ?></h3>

                            <p style="text-align: center">
                                Specialities</p>
                        </div>
                        <div class="mefradio">
                            <input type="radio" name="adviser" id="adviser"
                                   value='<?php echo $row['user_id'] . "|" . $row['fname'] . " " . $row['lname'] ?>'><br>
                        </div>
                    </div>
                </div>


            <?php
            $next_item = false;

            if ($i % 4 == 0) {
                echo '</div>';
                $next_item = true;
            }

            $i++;
            }
            ?>
        </div>

        <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
        <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
        </div>

需要配合的JS如下

<script>

    $(document).ready(function(){
        $('#myCarousel').carousel({
            pause: true,
            interval: false
        });

    });
    $('#myCarousel').on('slid', '', function() {
        var $this = $(this);

        $this.find('.carousel-control').show();

        if($('.carousel-inner .item:first').hasClass('active')) {
            $this.find('.left.carousel-control').hide();
        } else if($('.carousel-inner .item:last').hasClass('active')) {
            $this.find('.right.carousel-control').hide();
        }

    });
</script>

Answer 1

更新：

根据 Bootstrap 2.3 轮播的工作方式，像您所做的那样的多个项目不会连续显示 4 个项目，只有一个 .item 类可以有一个 .active 类，所以这就是我们的会做：

<div class="item active">
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
</div>

<div class="item">
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
  <div class="span3"><img></div>
</div>

这就是我们将如何构建您的元素的外观。所以代码在：

<!-- code follows -->
<div class="carousel-inner">
<?php
$i = 1;
$next_item = true;

while ($i < 10)
    {
    if ($i == 1)
        {
        echo '<div class="item active">';
        }
    elseif ($next_item == true)
        {
        echo '<div class="item">';
        }

?>
                    <div class="span3 mef-3">
                    <!-- code follows -->
                    </div>
<?php
$next_item = false;

if ($i % 4 == 0)
    {
    echo '</div>';
    $next_item = true;
    }

$i++;
}
?>

另外，由于您将轮播命名为id=myCarousel，因此您的上一个和下一个按钮的href 应该是href="#myCarousel" 而不是href="#textCarousel"。

这是 demo 的外观。