У меня возникла проблема с bootstrap-слайдером и PHP. Дело вот в чем, на WordPress сайте есть слайдер от bootstrap, который захватывает ID изображений из админ.панели и заносит их в сам слайдер. Так вот, у bootstrap-слайдера должен быть класс "active" чтобы изображения менялись:
$images = array(
'slider_1' => get_theme_mod('slider_1'),
'slider_2' => get_theme_mod('slider_2'),
'slider_3' => get_theme_mod('slider_3'),
);
?>
<div class="rubin-banner-slider carousel slide" id="RubinSlider" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<?php
$c = 1;
$active = ( $c == 1 ? ' active' : '');
foreach ( $images as $image ) {
if ( $image ) {
?>
<div class="carousel-item <?php echo $active ?>">
<div class="d-block background-image header-slider slide-item-<?php echo $c; ?>"
style="background-image:url(<?php echo esc_url($image); ?>) ">
</div>
</div>
<?php
}
$c ++;
}
?>
</div>
</div>
<?php
Мне нужно чтобы у div c классов .carousel-item появлялся класс .active только у первого изображения, а потом у следующего, до которого дойдет очередь в слайдере. Сейчас же у меня дела обстоят примерно вот так: https://imgur.com/a/szoaj Т.е у меня выводится класс .active не на первое изображение, а на все загруженные сразу. Из-за чего изображения встают друг под другом. Если оставить класс .active в самом браузере у одного div, а у остальных убрать, то слайдер начинает работать. Как можно это исправить?