Как сделать работающую карусель?

Question

[Никита Ройсман]

Всем привет. Хочу на странице добавить 10 последних новостей в виде карточек в горизонтальном положении, но столкнулся с такой проблемой:
Выбираю вторую карусель с кнопками prev/next, вставляю код и внедряю шорткод (пример ниже) - сохраняю.

....
    <div class="carousel-item active">
      {news} <!--вывод 10 последних новостей--!>
    </div>
  </div>
...

После сохранения карусель работает не корректно.
Если просто вставить без active, карусель не отображается

...
    <div class="carousel-item">
      {news} <!--вывод 10 последних новостей--!>
    </div>
...

Answer 1

[Алексей Голягин]

Примерно так, разметку только подгоните под свою

<?php
     $args = array(
     'post_type' => 'slide',
     'posts_per_page' => -1,
     'order' => 'ASC',
   );
$slide = new WP_Query($args);?>
<?php if ($slide->have_posts()): ?>
<div id="slider">
        <div class="bd-example">
            <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel" data-interval=10000>
                <div class="">
                    <ol class="carousel-indicators">
                        <?php $i = 0;while ($slide->have_posts()): $publicity->the_post();?>
                            <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>" class="<?php if ($i === 0): ?>active<?php endif;?>"></li>
                        <?php $i++; endwhile;?>
                    </ol>
                    <div class="carousel-inner">
                        <?php $i = 0;while ($slide->have_posts()): $slide->the_post();?
                                <div class="carousel-item <?php if (0 == $i) {echo ' active';}?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 100vh;">
                                    <div class="carousel-caption d-none d-md-block">
                                        <div class="row align-items-center ">
                                            <div class="col-lg-4 title">
                                                <span><?php the_title();?></span>
                                                <h2><?php the_content();?></h2>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        <?php $i++;endwhile;?>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <?php wp_reset_postdata();endif;?>