Question

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

我检查了DOM，并且the data-slide-to正在正确更新每张幻灯片上关联的$number标签上的<a>。因此，我不确定为什么单击<a>标签时，它不会滑动到轮播中的下一张图片。

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

HTML / PHP-Bootstrap 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 -->

Bootstrap 4动态WordPress轮播不会滑动

1 个答案: