Проблема с bootstrap-слайдером в WordPress-теме

173

05 апреля 2018, 12:41

У меня возникла проблема с 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, а у остальных убрать, то слайдер начинает работать. Как можно это исправить?

Answer 1

Переменную $active нужно разместить внутри цикла foreach, т.к. в данный момент она считает $c всегда равным 1 - поэтому все элементы цикла были с классом active:

<?php
$c = 1;
foreach ( $images as $image ) {
    $active = ( $c == 1 ? ' active' : '');
    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 ++;
}
?>