How can I prevent Bootstrap carousel images from stacking? HTML/CSS (using PHP to display images)
Question
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.
I'm thinking it might have something to do more with the PHP than the HTML at this point.
EDIT: WORKING CODE FOR FUTURE REFERENCE
<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="item' . ($i++ === 0 ? ' active' : '') . '" align="center">';
echo '<img src="admin/images/' . $imrow->img_name . '" width="auto" height="auto"/>';
echo '</div>';
}
}
?>
<?php
$i++;
endfor;
?>
</div>
1 answers
solution1
1 ACCPTED 2018-02-06 12:27:13
Try this:
<?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='"item' . $i == 0 ? 'active': '' . '" align="center"><img src="admin/images/"' . $imrow->img_name . '" width="auto" height="auto"></div>";
}
}
?>
<?php
$i++;
endfor;
?>
You may need to play around quotes, but your problema is that you generated all img tags on a singles div.item. For each image, you need to wrap around the img in a div.item.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.