Bootstrap carousel not working with php - php

Question

I am trying to modify an existing carousel by loading data from an SQL instead of hardcoding it. But, after fetching the data from SQL using PHP the controls of the carousel is not working.
When I checked the source, the contents of all slides are added correctly obtained from the database.
FYI - I also have another carousel on the same page which is working fine. So, I think all the requirements will be loaded correctly.
Below is my code:
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<!-- Query from db -->
<?php
$sql='SELECT * FROM Books LIMIT 6';
$result = mysqli_query($con, $sql); ?>
<!-- start of while loop -->
<?php while($row = mysqli_fetch_array($result)) { ?>
<?php if ($row[bookID] == 1) echo '<div class="item active">';
else echo '<div class="item">'; ?>
<div class="fill" style="background-image: url('<?php echo $row[thumb]; ?>');">
<a href="books.php?page=<?php echo $row[bookID]; ?>" class="portfolio-box">
<img src="<?php echo $row[thumb]; ?>" class="img-responsive"
alt="<?php echo $row[name_small]; ?>">
<div class="portfolio-box-caption portfolio1">
<div class="portfolio-box-caption-content">
<div class="project-name">
<h4><strong><?php echo $row[name_small]; ?></strong>
<small><?php echo $row[second_title]; ?></small>
</h4>
<hr>
<p><?php echo $row[mini_desc]; ?></p>
<p><strong>First Published :</strong>
<?php echo $row[first_published]; ?></p>
</div>
</div>
</div>
</a>
</div><?php } ?>
<!-- end of while loop -->
</div>
<!-- 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
</section>
I tried comparing the code to my old carousel and everything looks the same. Can anyone tell me what I am doing wrong here?

Answer 1

Try this end of your loop:
</div><!--portfolio-box-caption-->
</a>
</div><!--fill-->
</div><!--item-->
<?php } ?><!-- end of while loop -->

Answer 2

Your condition
if($row[bookID] == 1)
It can or not have bookID equal to 1 in your database data !
To prevent it, use this
<?php $i = 1; while($row = mysqli_fetch_array($result)): ?>
<div class="item <?= ($i == 1) ? 'active' : '' ?>">
<div class="fill" style="background-image: url('<?php echo $row[thumb]; ?>');">
<a href="books.php?page=<?php echo $row[bookID]; ?>" class="portfolio-box">
<img src="<?php echo $row[thumb]; ?>" class="img-responsive"
alt="<?php echo $row[name_small]; ?>">
<div class="portfolio-box-caption portfolio1">
<div class="portfolio-box-caption-content">
<div class="project-name">
<h4><strong><?php echo $row[name_small]; ?></strong>
<small><?php echo $row[second_title]; ?></small>
</h4>
<hr>
<p><?php echo $row[mini_desc]; ?></p>
<p><strong>First Published :</strong>
<?php echo $row[first_published]; ?></p>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>