How can I prevent Bootstrap carousel images from stacking? (using PHP to display images)

PHP
1

I have a Bootstrap carousel displaying my images. Everything for it was working fine, until I had to change my coding to call for specific images linked to the post the were uploaded with. Now the images are stacking on another another instead of showing in individual frames that can be manually or automatically cycled through. Does anyone know what I can do to fix this issue?

Here is the HTML from when I had it working correctly:

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators">
        <?php
            $i = 0;
            for ($a = 2; $a < count($files); $a++):
          ?>
          <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="<?php echo $i == 0 ? 'active': ''; ?>"></li>
        <?php
          $i++;
          endfor;
        ?>
        </ol> 

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

          <?php
            $i = 0;
            for ($a = 2; $a < count($files); $a++):
          ?>

          <div class="item <?php echo $i == 0 ? 'active': '';  ?>" align="center">
            <!-- THE LINE BELOW THIS IS WHERE THE ISSUE WILL BE WHEN I CHANGE THE CODING -->
            <img src="admin/images/<?php echo $files[$a];?>">
          </div>

          <?php
            $i++;
            endfor;
          ?>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

Everything works fine with this code. However, when I change it to this, the images stack and no longer show as individual frames (I’ve just singled out the wrapper for slides portion):

<?php
        $i = 0;
        for ($a = 2; $a < count($files); $a++):
      ?>

      <div class="item <?php echo $i == 0 ? 'active': '';  ?>" align="center">

      <!-- ON THE LINE BELOW IS THE CHANGED CODE THAT THE ISSUES SHOWS UP FOR -->

       <?php 
        $imsql = "SELECT img_name, img_path FROM images WHERE post_id = '$id'";
        $q2 = $db->query($imsql);
        if($q2->num_rows>0){
          while ($imrow = $q2->fetch_object()){
          echo "<img src='admin/images/".$imrow->img_name."' width='auto' height='auto' >";
        }
      }
        ?>


      </div>

      <?php
        $i++;
        endfor;
      ?>
    </div>

And here is the pertinent information I have in my <head> in my HTML:

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I have not added any custom/modified CSS for the carousel yet.

2

I don’t do php so this is probably a question for the php forum :slight_smile:

If you want to post the html from view source I may be able to see where you are going wrong.

I think you should only be outputting one image in each .item div container IIRC. If your php is not doing that then that may be the issue.

2 Likes
3

After messing with it for awhile last night, I think it is the PHP that is the issue rather than the HTML/CSS. So I’m probably gonna move my question over there. I was going to post the view source HTML for you, and after looking at that, I am fairly certain that it’s a PHP issue I’m having since it’s outputting multiple images per .item div.

When looking at the view source it shows:

<div class="item active" align="center">

           <img src='admin/images/fb.png' width='auto' height='auto'/><img src='admin/images/ig.png' width='auto' height='auto'/><img src='admin/images/fbm.png' width='auto' height='auto'/><img src='admin/images/Untitled-1.png' width='auto' height='auto'/><img src='admin/images/twitter.png' width='auto' height='auto'/>

          </div>

So I believe it’s just a matter of me modifying my PHP syntax. You helped me out though by asking for the view source code because I hadn’t looked at that yet :slight_smile:

1 Like
4

Moved to the PHP forum.

2 Likes
5

I agree with Paul, perhaps adding end/start tags to wrap the images in their own item contaner would do the trick?
E.g.
echo "</div><div class="item><img src='admin/images/".$imrow->img_name."' width='auto' height='auto' >";

1 Like
6

I ended up figuring it out. It was just a matter of changing some syntax around.

    <div class="carousel-inner">

      <?php
        $i = 0;
        for ($a = 2; $a < count($files); $a++):
      ?>

       <?php 
        $imsql = "SELECT img_name, img_path FROM images WHERE post_id = '$id'";
        $q2 = $db->query($imsql);
        if($q2->num_rows>0){
          while ($imrow = $q2->fetch_object()){  
            echo '<div class="' . ($i == 0 ? 'item active' : 'item') . '" align="center">';
            echo '<img src="admin/images/' . $imrow->img_name . '" width="auto" height="auto"/>';
            echo '</div>';
        }
      }
        ?>

      <?php
        $i++;
        endfor;
      ?>
    </div>
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.