Создание слайдера (карусель) на PHP + Bootstrap

В данной заметке я покажу как запрограммировать стандартный слайдер (карусель) Bootstrap. Решение представлено для версии Bootstrap 3, однако не составит труда переделать его и для Bootstrap 4.

<? if($banners): ?>
<div class="banners">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
            <?php
            $counter = 0;
            $countSlides = count($banners) - 1;
            for ($i = 0; $i <= $countSlides ; $i++):
                if ($counter == 0): $active = 'active';
                else: $active = '';
                endif;
                ++$counter;
                if (count($banners) > 1):
                    echo '<li data-target="#myCarousel" data-slide-to="'.$i.'" class="'.$active.'"></li>';
                endif;
            endfor;
            ?>
      </ol>
    <div class="carousel-inner">
      <? $i = 0;
          foreach($banners as $banner): ?>
            <? if ($i == 0): $active=' active';
                else: $active = '';
                endif;
            	++$i;
             ?>
          <div class="item <?= $active ?>">
            <img alt="<?= $banner->name ?>" src="<?= $banner->getImagePath() ?>" width="100%"> 
          </div>
      <? endforeach ?>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
    </a>
  </div>
</div>
<? endif; ?>