Создание слайдера (карусель) на 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; ?>