使用ACF和CPT UI使引导5.0旋转木马动态化

我正在尝试使用ACF和CPT UI使bootstrap 5.0 carousel（带指示器）动态化。我意识到我需要在data-bs-slide-to 以及其他数字和箭头以及class="active" 也是动态的，但我不知道怎么做。现在，我可以同时显示所有幻灯片—一张放在另一张的上面。如果插入参数\'posts_per_page\' => 1, 然后第一张幻灯片就可以看到了，但旋转木马不会旋转。

My code:

<!-- Carousel from bootstrap-->
<div id="carouselBootStrap" class="carousel slide" data-bs-ride="carousel">
 <ol class="carousel-indicators">
   <li data-bs-target="#carouselBootStrap" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">1</li>
   <li data-bs-target="#carouselBootStrap" data-bs-slide-to="1" aria-label="Slide 2">2</li>
   <li data-bs-target="#carouselBootStrap" data-bs-slide-to="2" aria-label="Slide 3">3</li>
 </ol>
 <div class="carousel-inner"> 


<?php $loop = new WP_Query(array(\'post_type\' => \'slider_feature\', \'orderby\' => \'ID\', \'order\' => \'ASC\' )); ?>

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

 <div class="carousel-item active dark-header-overlay">
     <h2 class="centered font-sl-head"><?php the_field(\'slide_text\'); ?> <img class="img-hline" src="<?php the_field(\'small_slide_img\'); ?>" alt=""></h2>
     
     <img class="d-block w-100 h-70" src="<?php the_field(\'img_slide\'); ?>" alt="">
      
   </div>

<?php endwhile; 
wp_reset_query(); ?>


 </div>

 <button class="carousel-control-prev" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Previous</span>
 </button>
 <button class="carousel-control-next" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="visually-hidden">Next</span>
 </button>
</div>

<div id="carouselBootStrap" class="carousel slide" data-bs-ride="carousel"> <?php $loop = new WP_Query(array(\'post_type\' => \'slider_feature\', \'orderby\' => \'ID\', \'order\' => \'ASC\' )); ?> <?php if( $loop->have_posts()): $i = 0; ?> <ol class="carousel-indicators"> <?php while ($loop->have_posts()): $loop->the_post(); ?> <li data-bs-target="#carouselBootStrap" data-bs-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo \'active\'; ?>" aria-current="true" aria-label="Slide 1">  <?php echo $i+1; ?></li> <?php $i++; endwhile; ?> </ol> <?php endif; ?> <div class="carousel-inner"> <?php if( $loop->have_posts()): $i = 0; ?> <?php while ($loop->have_posts()): $loop->the_post(); ?> <div class="carousel-item dark-header-overlay <?php if($i == 0) echo \'active\'; ?>"> <h2 class="centered font-sl-head"><?php the_field(\'slide_text\'); ?> <img class="img-hline" src="<?php the_field(\'small_slide_img\'); ?>" alt=""></h2> <img class="d-block w-100 h-70" src="<?php the_field(\'img_slide\'); ?>" alt=""> </div> <?php $i++; endwhile; ?> <?php wp_reset_query(); ?> <?php endif; ?> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselBootStrap" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>

Bootstrap grid while loop

我用bootstrap制作了一个网格，我想在其中显示5个不同的帖子，但出于某种原因，它复制了网格，并且每个网格显示一个帖子。第一幅图显示了它如何开始将网格复制5次，而不是仅在这些列中显示5篇文章。第二张图片显示了我想如何工作。 <?php get_header(); ?> <main> <div class=\"container\"> <div class=\"row\"> <?php &

相关推荐

Bootstrap grid while loop