Can't make carousel work in php: CodeIgniter

Question

I have added a carousel in a container but it remains static showing the first pic. Though the carousel buttons are visible but not active. The code is:

<div class="col-xl-8 col-lg-8 col-md-7  mb-5 mb-md-0">

             <div id="" class="pt-0 pt-md-4 pt-lg-5">

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

                   <ol class="carousel-indicators">
     

                      <?php if (!empty($event)) {

                           foreach ($event as $key => $value) {

                        ?>

                            <li data-target="#carouselExampleIndicators" data-slide-to="<?= $key ?>" <?php if ($key == 0) { ?> class="active" <?php } ?>></li>

                      <?php }

                        } ?>

                   </ol>

                   <div class="carousel-inner">

                      <?php if (!empty($event)) {

                           foreach ($event as $key => $value) {



                              $date = date('d', strtotime($value['datetime']));

                              $month = date('F', strtotime($value['datetime']));

                              $year = date('Y', strtotime($value['datetime']));



                              $seconds = strtotime($value['datetime']) - time();



                              $days = floor($seconds / 86400);

                              $seconds %= 86400;



                              $hours = floor($seconds / 3600);

                              $seconds %= 3600;



                              $minutes = floor($seconds / 60);

                              $seconds %= 60;

                              $cdate = date("Y-m-d H:i:s", strtotime($value['datetime']));

                              if ($cdate > date("Y-m-d H:i:s")) {

                        ?>

                               <div class="carousel-item <?php if ($key == 0) { ?>active<?php } ?>">

                                  <div class="row">

                                     <div class="col-md-12 col-lg-6 mb-4 mb-md-0">

                                        <div class="d-flex align-items-center justify-content-between w-100">

                                           <!--<div class="images-craus">-->

                                           <!--   <img src="<?= base_url() ?>/images/upcomingevents/<?= $value['image1'] ?>">-->

                                           <!--</div>-->

                                           <div class="dates">

                                              <h3 class="months"><?= $month ?> <?= $date ?><br><?= $year ?></h3>

                                              <h3 class="team"><?= $cdate ?> <br><?= $value['team1'] ?> vs <?= $value['team2'] ?></h3>

                                           </div>

                                           <!--<div class="images-craus">-->

                                           <!--   <img src="<?= base_url() ?>/images/upcomingevents/<?= $value['image2'] ?>">-->

                                           <!--</div>-->

                                        </div>

                                     </div>

                                     <div class="col-md-12 col-lg-6 mb-4 mb-md-0">

                                        <div class="details1">

                                           <div class="pt-0 pt-md-4 pb-3">

                                              <h5 class="text-white text-center">Next Match<br><?= $value['team1'] ?> vs <?= $value['team2'] ?></h5>

                                           </div>

                                           <div class="button-20 d-flex">

                                              <button type="button" class="btn btn-danger"><?= $days ?> day</button>

                                              <button type="button" class="btn btn-danger"><?= $hours ?> hr</button>

                                              <button type="button" class="btn btn-danger"><?= $minutes ?>min</button>

                                           </div>

                                        </div>

                                     </div>

                                  </div>

                               </div>

                      <?php }

                           }

                        } ?>

                   </div>

I tried looking at bootstrap feature but couldn't really work it out. Mind you this carousel also have a table list which shows on the right side of the container. I am not sharing it code as table is working fine.