How to make a working carousel?

Question

Bootstrap

Hello. I want to add 10 latest news in the form of cards in a horizontal position on the page, but I ran into the following problem:
I select the second carousel with prev / next buttons, paste the code and implement the shortcode (example below) - save.

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

After saving, the carousel does not work correctly.
If you just paste without active, the carousel is not displayed

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

Answer 1

Something like this, just adjust the markup to fit your

<?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;?>