doubo6658
2014-05-22 10:34
浏览 99
已采纳

bootstrap 2.3旋转木马中的多个图像/项目

I am working on a PHP based website which is using Twitter Bootstrap 2. I am pulling the users from MySQL database and trying to display them in multiple frames/items of carousel on a screen rather than a single item using while loop.

This is what my carousel looks like at present, as you will notice user 5 is not supposed to appear the way it is right now and is only supposed to appear when i click on arrow on right side of the carousel. enter image description here

This is what my php code looks like

<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 will really appreciate any guidance on how to get it to work

UPDATE

This is the updated code that is working, thanks to @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>

The JS that needs to go with this is as following

<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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongyi9023 2014-05-22 11:55
    已采纳

    Updated:

    As per the way Bootstrap 2.3 carousel works, multiple items like the way you have done won't show 4 items in a row and only one .item class can have an .active class to it, so here's what we would do:

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

    That's how we are going to structure your elements to look like. So code in:

    <!-- 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++;
    }
    ?>
    

    Also, since you name your carousel as id=myCarousel, your prev and next button's href should be href="#myCarousel" and not href="#textCarousel".

    Here's a demo of what it looks like.

    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题