在没有插件的情况下在WordPress中集成Bootstrap轮播

Question

我已将自举旋转木马整合到我的wordpress中.幻灯片将从标记为"特色"的帖子中删除,因此最近只会显示5个"特色"帖子.

以下是我的代码:

<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs">
        <ol class="carousel-indicators">
          <li data-target="#carousel-captions" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-captions" data-slide-to="1" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="2" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="3" class=""></li>
          <li data-target="#carousel-captions" data-slide-to="4" class=""></li>
        </ol>
        <div class="carousel-inner">

<?php $the_query = new WP_Query( 'tag=featured&orderby=date&posts_per_page=5' ); ?>

<?php if ( $the_query->have_posts() ) : ?>

  <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="item">
          <a href="<?php the_permalink() ?>">
            <img src="<?php the_field('header_banner', $post_id); ?>" alt="">
            <div class="carousel-caption">
              <h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr>
              <p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details&nbsp;&nbsp;&nbsp;&rarr;</span>
            </div></a>
          </div>
  <?php endwhile; ?>
  <?php wp_reset_postdata(); ?>

<?php else:  ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>


        </div>
        <a class="left carousel-control" href="#carousel-captions" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-captions" data-slide="next">
          <span class="icon-next"></span>
        </a>
</div>

问题是它没有滑动,因为"活动"类不能静态工作.

我该如何解决？

谢谢

Answer 1

为避免必须两次查询,可以在循环外设置一个变量设置为1.在循环中,当它等于1时添加"active"类,然后递增它.

<?php
// Previous code here...
$i = 1;
while ( $the_query->have_posts() ) :
    $the_query->the_post();
         ?>
        <div class="item<?php if ($i == 1) echo 'active'; ?>">

        </div>
<?php
    $i++;
endwhile;
wp_reset_postdata();
?>

Answer 2

将第一个查询限制为 1 个帖子。在第一个循环中，将轮播项目类别设置为活动状态。重置查询并运行第二个循环，偏移一，并否定活动类，如下所示：

    <div class="carousel-inner">
        <?php
          $the_query = new WP_Query(array(
           'post_type' =>'post',
           'posts_per_page' => 1
         ));
         while ( $the_query->have_posts() ) :
         $the_query->the_post();
         ?>
        <div class="item active">
            First Slide
        </div>
        <?php endwhile; wp_reset_postdata(); ?>
        <?php
         $the_query = new WP_Query(array(
          'post_type' =>'post',
          'offset' => 1
         ));
         while ( $the_query->have_posts() ) :
         $the_query->the_post();
         ?>
         <div class="item">
            Remaining Slides
         </div>
        <?php endwhile; wp_reset_postdata(); ?>
    </div>