Bootstrap 4 动态 WordPress 轮播不会滑动

Question

我正在尝试使用 Bootstrap 4 和 WordPress 创建一个动态轮播。我的标题和第一张图片正确显示在前端，但我无法让轮播滑动到下一张图片和标题。

我检查了 DOM，the data-slide-to 正在每张幻灯片上正确更新关联的<a> 标签上的$number。所以我不知道为什么当我点击<a> 标签时它不会滑到轮播中的下一个图像。

我已经通过硬编码 HTML 作为测试来测试 HTML，它工作正常，我在 jQuery 和 Bootstrap4 JS 中加载正确。此外，由于 data-slide-to 在 DOM 中有正确的数字，我不确定代码的哪一部分导致滑块无法向前移动。

HTML/PHP - 引导 4

<div id="my-carousel" class="carousel slide" data-ride="carousel">
 <?php 
     $the_query = new WP_Query(array(
      'category_name' => 'Featured', 
      'posts_per_page' => 1,
      'offset' => 0
      )); 
     while ( $the_query->have_posts() ) : 
     $the_query->the_post();
?>
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="carousel-inner" role="listbox">
    <div class="carousel-item active" style="background: url('<?php echo $backgroundImg[0]; ?>');">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="slider-sub"><?php the_title(); ?></h2>
        </div>
    </div>
<?php 
  endwhile; 
  wp_reset_postdata();
?>
</div><!-- END CAROUSEL INNER -->

<div class="container-fluid">
  <div class="row slider-row">
    <?php 
      $number = 0; 
      query_posts('category_name=featured'); 
      if(have_posts()):  
    ?>

    <?php while(have_posts()): the_post(); ?>
    <div class="col-sm-4 feature-box highlight carousel1">
        <a data-target="#my-carousel" data-slide-to="<?php echo $number++; ?>" class="active carousel-link"><?php the_title(); ?></a>
    </div><!-- END COL -->
    <?php endwhile; ?>
  </div><!-- END ROW -->
</div><!-- END CONTAINER -->

<?php endif; wp_reset_query(); ?>

Answer 1

我得到了这个工作。我重写了帖子是如何被调用的，并且我了解到即使我隐藏了轮播指示器，如果没有它们成为 HTML 的一部分，滑块也不会改变幻灯片。不确定这只是我的目的还是 Bootstrap 的规则，但这是我的经验。您可以在我的代码中看到我尝试用链接替换更改的幻灯片，这确实有效，但指示器必须仍然存在于 HTML 中。如果它们被删除，它将不起作用。

<?php
  $args = array(
  'post_type' => 'post',
  'posts_per_page' => 3,
  'category_name' => 'Featured'
);
$the_query = new WP_Query ( $args ); 
?>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="7000">
<ol class="carousel-indicators">
  <!-- Start Carousel Indicator Loop -->
  <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
  <li data-target="#my-carousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="<?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>"></li>
  <?php endwhile; endif; ?>
</ol>
<?php rewind_posts(); ?>    


<div class="carousel-inner"> 
  <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
  ?>

  <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
  <div style="background: url('<?php echo $backgroundImg[0]; ?>');" class="carousel-item <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>">

        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> </a>

        <div class="container">
          <div class="carousel-caption text-left">
            <h1><?php the_title(); ?></h1>
            <p class="d-none d-sm-block"><?php the_excerpt(); ?></p>
          </div>
        </div>
     </div><!-- /.carousel-item -->
    <!-- end second loop -->
  <?php endwhile; endif; ?>
</div><!-- /.carousel-inner -->

<div class="container-fluid">
  <div class="row slider-row carousel slide" data-ride="carousel" data-interval="7000">
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <div class="col-sm-4 feature-box highlight carousel1">
        <a data-target="#my-carousel" data-slide-to="<?php echo $the_query->current_post; ?>" class="carousel-link <?php if ( $the_query->current_post == 0 ) : ?>active<?php endif; ?>"><?php the_title(); ?></a>
    </div><!-- END COL -->
    <?php endwhile; endif; ?>
    <?php rewind_posts(); ?>

  </div><!-- END ROW -->
</div><!-- END CONTAINER -->