Bootstrap 4 Карусель с использованием WP Posts, укладывающиеся и не скользящие

Question

Я хочу отображать элементы Wordpress в виде слайдера, но они, кажется, складываются и не скользят слева направо, и поэтому элементы управления каруселью не будут работать.Если я сделаю 'posts_per_page' => 1, второе сообщение исчезнет, ​​но если я сделаю 'posts_per_page' => 10, они будут складываться.Любая помощь будет оценена.Большое спасибо, Кали

$post                              = get_field('post');
?>

<!-- OPEN CAROUSEL LOOP -->
<?php 
      $loop = new WP_Query(array(
         'post_type' => 'post', 
         'posts_per_page' => 1,
         'orderyby' => 'post_id', 
         'order' => 'ASC', 
         )); ?>

<?php
while ( $loop->have_posts() ) : $loop->the_post();
?>

<!-- START CAROUSEL **************************************************************** -->
<div id="news-carousel" class="carousel slide" data-ride="carousel"> 

 <!-- **************************************************************** -->      
      <!-- Indicators -->
                     <ul class="carousel-indicators">
                        <?php
                            $active = 'active';
                            $num = 0;
                         ?>

                        <li data-target="#carousel1" data-slide-to="<?php echo $num ?>" class="<?php echo $active ?>"></li>
                        <?php
                            $active = '';
                            $num += 1;
                        ?>
                    </ul>   

    <!-- **************************************************************** -->    

   <?php if ( has_post_thumbnail() ) { ?>
      <!-- The slideshow -->
      <div class="carousel-inner" role="listbox" >
            <?php $active = 'active'; ?> 
                  <div class="carousel-item <?php echo $active ?>">
                        <div >
                            <?php the_post_thumbnail( 'full' ); ?>
                            <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>      
                        </div>
                  </div><!-- /item -->      
            <?php $active = '';  ?>   
      </div>
      <!-- // End The slideshow -->
    <?php } ?>   

    <!-- **************************************************************** -->       

    <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#news-carousel" role="button" data-slide="prev">
                <i class="fa fa-chevron-left"></i> </a>
            <a class="carousel-control-next" href="#news-carousel" role="button" data-slide="next">
                <i style="color: black;" class="fa fa-chevron-right"></i> </a>

</div> <!-- Carousel 1 -->


<!-- End Carousel **************************************************************** -->

<?php 
    endwhile; 
    wp_reset_postdata();
?>  

Answer 1

Шамми, благодаря вашей помощи выше, я переработал код и сумел заставить его работать.Вот это:

$carousel_item                              = get_field('carousel_item');
?>

<!--OPEN CAROUSEL LOOP-->
<?php $loop = new WP_Query(array(
          'post_type' => 'post', 
          'posts_per_page' => 6,
          'orderyby' => 'post_id',
          'order' => 'ASC' )); 
          ?>

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
    <ul class="carousel-indicators">
       <?php $count = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>
         <li data-target="#news-carousel" data-slide-to="<?php echo $count ?>" class="<?php if($count == '0'){ echo 'active'; } ?>"></li>
       <?php $count++; endwhile; wp_reset_postdata(); ?>  
    </ul>

 <?php $count = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>      
     <?php if ( has_post_thumbnail() ) { ?>   

  <!-- The slideshow -->
           <div class="carousel-item <?php if($count == '0'){ echo 'active'; } ?>">
            <div >
                <?php the_post_thumbnail( 'full' ); ?>
                <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>      
            </div>
      </div><!-- /item -->

  <?php } ?>    
    <?php $count++; endwhile; wp_reset_postdata(); ?>  

    <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#demo" role="button" data-slide="prev">
            <i class="fa fa-chevron-left"></i> </a>
        <a class="carousel-control-next" href="#demo" role="button" data-slide="next">
            <i style="color: black;" class="fa fa-chevron-right"></i> </a>

</div> <!-- Carousel 1 -->

Answer 2

Try to use this code:


<!--OPEN CAROUSEL LOOP-->
<?php $loop = new WP_Query(array(
          'post_type' => 'post', 
          'posts_per_page' => 6,
          'orderyby' => 'post_id',
          'order' => 'ASC' )); 
          ?>

<!--CAROUSEL indicators SECTION START HERE-->           
<ul class="carousel-indicators">
   <?php $count = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>
     <li data-target="#carousel1" data-slide-to="<?php echo $count ?>" class="<?php if($count == '0'){ echo 'active'; } ?>"></li>
   <?php $count++; endwhile; wp_reset_postdata(); ?>  
</ul>
<!--//CAROUSEL indicators SECTION END HERE-->

<!--CAROUSEL SLIDER SECTION START HERE-->
<div id="news-carousel" class="carousel slide" data-ride="carousel"> 
  <?php $count = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>   
    <?php if ( has_post_thumbnail() ) { ?>
       <!-- The slideshow -->
        <div class="carousel-inner" role="listbox" >
           <div class="carousel-item <?php if($count == '0'){ echo 'active'; } ?>">
            <div >
                <?php the_post_thumbnail( 'full' ); ?>
                <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>      
            </div>
      </div><!-- /item -->
    </div>
    <!-- // End The slideshow -->
<?php } ?>   
<!-- **************************************************************** -->
 <?php $count++; endwhile; wp_reset_postdata(); ?> 
  <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#news-carousel" role="button" data-slide="prev">
            <i class="fa fa-chevron-left"></i> </a>
        <a class="carousel-control-next" href="#news-carousel" role="button" data-slide="next">
            <i style="color: black;" class="fa fa-chevron-right"></i> </a>
</div> <!-- Carousel 1 -->
<!--//CAROUSEL SLIDER SECTION END HERE-->
<!--//CAROUSEL indicators SECTION End HERE-->