looping to display images one by one from db into bootstrap carousel

Question

Trying to display carousel images from database in a foreach loop in codeigniter. The below code displays all the images at once. How can i display images inside a slider one by one? Also the next and previous buttons are not working?

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner" role="listbox">

    <?php $i = 1; ?>
    <?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
    <div class="<?php echo $item_class; ?>">=
        <a href="#">
            <?php foreach ($m->result() as $row)  :
              $Player=$row->image;
              echo "<img src='http://opunletter.com/" .  $Player . "'";
            ?>
        </a>
    </div>
    <?php $i++; ?>
    <?php endforeach; ?> 

    </div>

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div><!-- /.carousel -->

Your ordered list should be built the same way you're building the divs below it, Since it starts from 0; your counter should start from zero too. — ahmad, Nov 28 '15 at 16:01

score 1 · Answer 1 · answered Jan 16 '16 at 19:54

<?php
$i  = 1;
foreach ($m->result() as $row) {
    $Player     = $row->image;
    $item_class = ($i == 1) ? 'item active' : 'item';
?>
<div class="<?php echo $item_class; ?>">
    <a href="#">
        <img src="http://opunletter.com/<?php echo $Player; ?>" />
    </a>
</div>
<?php
    $i++;
}
?>

you need to keep the div.item within the loop for enclosing to each individual image.

score 0 · Answer 2 · answered Sep 05 '17 at 10:00

 <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">

  <div class="item active">
    <img class="img-rounded img-responsive mainpic" src='<%#"/ProfilePictures/" +Eval("ProfilePicture") %>' alt='<%#Eval("Username") %>'  onerror="this.src='/images/default-image.png'" style="width: 100%; height: 100%; max-width:512px;max-height:512px;">
    <div class="carousel-caption">
      <h3><%#Eval("Username") %></h3>
      <p>'<%#Eval("Mobile") %>'</p>
    </div>
  </div>


  **<asp:Repeater ID="Repeater3" runat="server" DataSourceID="SqlDataSource2"><ItemTemplate>**

  <div class="item">
    <img class="img-rounded img-responsive mainpic" id="po" runat="server" src='<%#Eval("Picture") %>' onerror="this.src='/images/default-image.png'" alt="" style="width: 100%; height: 100%;max-width:512px;max-height:512px;">
    <div class="carousel-caption">
        <h3><%#Eval("Productname") %></h3>
      <p>'<%#Eval("Productdiscription") %>'</p>
    </div>
  </div>


      **</ItemTemplate></asp:Repeater>**

I simply did this for an asp.net application, I didn't change anything anywhere else , and it works. I didn't put effort on the ordered list because i didn't need. Not as complicated as it seems.

looping to display images one by one from db into bootstrap carousel

2 Answers2