时间戳

首页 > 解决方案 > Bootstrap 4 Carousel 使用 WP Posts 堆叠而不是滑动

php - Bootstrap 4 Carousel 使用 WP Posts 堆叠而不是滑动

问题描述

我想将 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();
?>

标签： phpwordpressbootstrap-4

解决方案

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

推荐阅读