<!-- Carousel Section -->
<div id="carouselExampleAutoplayingban" class="carousel slide carousel-fade banner-bg" data-bs-ride="carousel">
  <!-- Carousel Indicators -->
  <div class="carousel-indicators">
    <?php foreach ($banners as $index => $banner): ?>
      <button type="button" data-bs-target="#carouselExampleAutoplayingban" data-bs-slide-to="<?= $index; ?>"
        class="<?= $index === 0 ? 'active' : '' ?>" aria-current="<?= $index === 0 ? 'true' : 'false' ?>"
        aria-label="Slide <?= $index + 1; ?>">
      </button>
    <?php endforeach; ?>
  </div>

  <!-- Carousel Items -->
  <div class="carousel-inner banner-bg">
    <?php foreach ($banners as $index => $banner): ?>
      <div class="carousel-item <?= $index === 0 ? 'active' : '' ?>">
        <img src="<?= $this->Url->image(h($banner->image_path)) ?>" class="img-fluid d-block bg-image w-100"
          alt="<?= h($banner->title) ?>">

        <div class="carousel-caption d-none d-md-block d-sm-block">
          <div id="carousel-caption">
            <p class="mb-2 lh-sm animated fadeInUp slow pr-5 animation-delay">
              <?= h($banner->title) ?>
            </p>
            <h4 class="mb-2 animated fadeInUp slow d-none d-md-block lh-base animation-delay">
              <?= h($banner->description) ?>
            </h4>
          </div>
        </div>
      </div>
    <?php endforeach; ?>
  </div>

  <!-- Carousel Controls -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplayingban"
    data-bs-slide="prev">
    <span id="control" class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>

  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplayingban"
    data-bs-slide="next">
    <span id="control" class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>