bootstrap 2.3 multiple images / items in carousel

Question

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>

check 'class="item active"' . for the fifth item 'active' class should not be there — k360, May 22 '14 at 10:45
@user3472089 thanks, yes i am thinking the same but since i am using while look any idea how how to remove that from fifth item? — Shairyar, May 22 '14 at 10:47
pls refer this. I'm, afraid this method is not possible. http://stackoverflow.com/questions/20007610/bootstrap-3-carousel-multiple-frames-at-once — k360, May 22 '14 at 10:55
Yes i have looked into that, they are using bootstrap 3 and each item has 4 products added in plan html, not using any while loop — Shairyar, May 22 '14 at 10:59

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 22 '14 at 11:55

AyB

11,609
4
32
47

Thanks, I did try this approach as well but this did not work. – Shairyar May 22 '14 at 12:07
@Baig Is it still showing the 5th item in the carousel? – AyB May 22 '14 at 12:12
No it does not show the fifth item, however it does not scroll – Shairyar May 22 '14 at 12:13
Thanks, I am checking it and will get back – Shairyar May 22 '14 at 13:22
it seems to work alright, thank you so much, however when i reach to last item and click on the next the slider just disappears, i have updated the code in my question which is working – Shairyar May 22 '14 at 13:38
it worked, thanks alot :) reallllly appreciate it. The logic you implemented is very nice – Shairyar May 22 '14 at 13:57
@Baig You're welcome, are you still having that problem of slider disappearing? – AyB May 22 '14 at 16:57

bootstrap 2.3 multiple images / items in carousel

1 Answers1

Updated: