Как настроить карусель в WordPress при добавлении нового типа поста с классами Bootstrap (active)?

Question

[Taron4uk]

Добрый день!
Ситуация такова:
1. Создал новый тип поста для добавления фотографий через панель управления, вот код:

<?php
                            global $post;

                            $query = new WP_Query( [
                                'posts_per_page' => 6,
                                'post_type' => 'about'
                            ] );

                            if ( $query->have_posts() ) {
                                while ( $query->have_posts() ) {
                                    $query->the_post();
                                    ?>
                                    <div class="carousel-item active" data-bs-interval="10000">
                                        <img src="<?php echo get_the_post_thumbnail_url(); ?>" class="d-block w-100">
                                    </div>
                                    <?php
                                }
                            } else {
                                // Проектов не найдено
                            }

                            wp_reset_postdata(); // Сбрасываем $post
                            ?>

Убираю active - изображения исчезают, добавляю - появляются, но так как active на всех, то просто остается одно лишь первое изображение. Как это правильно реализовать, подскажите, пожалуйста я чайник совсем, только пытаюсь разобраться

Comments

[Михаил Ливач]

global $post;

можно убрать, Вы же её не используете

Answer 1

[Taron4uk]

Готово, разобрался

<?php
                            global $post;

                            $query = new WP_Query( [
                                'posts_per_page' => 6,
                                'post_type' => 'about'
                            ] );

                            if ($query->have_posts()) {
                                $index = 0; // Инициализация переменной для отслеживания индекса
                                while ($query->have_posts()) {
                                    $query->the_post();
                                    $activeClass = ($index == 0) ? 'active' : ''; // Проверка, является ли текущий элемент первым
                                    ?>
                                    <div class="carousel-item <?php echo $activeClass; ?>" data-bs-interval="10000">
                                        <img src="<?php echo get_the_post_thumbnail_url(); ?>" class="d-block w-100">
                                    </div>
                                    <?php
                                    $index++; // Увеличиваем индекс на каждой итерации
                                }
                            } else {
                                // Проектов не найдено
                            }

                            wp_reset_postdata(); // Сбрасываем $post
                            ?>

Answer 2

[pantsarny]

Вешайте active только на первую картинку !