引导2.3旋转木马中的多个图像/项

Question

我正在一个基于PHP的网站上工作，它使用的是Twitter 2。我从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>

我将非常感谢你对如何让它开始工作的任何指导。

更新

这是正在运行的更新代码，感谢@我可以拥有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

更新：

按照Bootstra2.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，所以您的prev和next按钮的href应该是href="#myCarousel"，而不是href="#textCarousel"。

这是一个关于它的样子的演示。