Bootstrap 3 Carousel集成的问题

我第一次构建一个主题，使用Bootstrap 3与Wordpress集成来实现。我有一个旋转木马部分工作。现在，它按相反的顺序显示幻灯片，即幻灯片3、幻灯片2、幻灯片1。然后它中断并转到一个空白屏幕。

这是我正在使用的代码。你知道为什么会发生这种情况吗？或者我可以试着让它以正确的顺序运行并无限循环吗？

<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <?php $new_query = new WP_Query(\'post_type=slide&posts_per_page=3\'); 
    $i = 1;
     while ( $new_query->have_posts()) : $new_query->the_post(); ?>

        <div class="item <?php if ($i == 1) echo \'active\'; ?>" >

          <img src="<?php the_field(\'slide_image\'); ?>" >

            <div class="carousel-caption">
              <h1><small><?php the_field(\'slide_caption\'); ?></small></h1>
            </div><!--carousel-caption-->

        </div><!--item active -->

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

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>


</div>

$args = array( \'post_type\' => \'slide\', \'orderby\' => \'date\', \'order\' => \'ASC\' ); $i=1; $slide_query = new WP_Query($args); while ( $slide_query->have_posts() ) : $slide_query->the_post();

<?php /** * The template part for displaying the front page carousel * * @package WordPress * @subpackage Any_Page_First * @since Any Page First 1.0 */ ?> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <?php // the query $sticky = get_option( \'sticky_posts\' ); $args = array( \'post__not_in\' => $sticky, ); $the_query = new WP_Query( $args ); ?> <?php if ( $the_query->have_posts() ) : ?>  <ol class="carousel-indicators"> <?php // Start the loop. $i = 0; while ( $the_query->have_posts() ) : $the_query->the_post(); if ( $i == 0 ) : ?> <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="active"></li> <?php else : ?> <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>"></li> <?php endif; ?> <?php // End the loop. $i++; endwhile; // Restore original Post Data wp_reset_postdata(); ?> </ol> <div class="carousel-inner" role="listbox"> <?php // the query $sticky = get_option( \'sticky_posts\' ); $args = array( \'post__not_in\' => $sticky, ); $the_query = new WP_Query( $args ); ?> <?php // Start the loop. $i = 0; while ( $the_query->have_posts() ) : $the_query->the_post(); if ( $i == 0 ) : ?> <div class="item active"> <?php else : ?> <div class="item"> <?php endif; ?> <?php // Include the carousel template content. get_template_part( \'template-parts/content\', \'carousel\' ); ?> </div> <?php // End the loop. $i++; endwhile; // Restore original Post Data wp_reset_postdata(); ?> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <?php endif; ?> </div>

相关推荐