Php 在WordPress中集成无插件引导旋转木马

我已将引导转盘集成到我的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>

问题是它不会滑动，因为“活动”类不是静态工作的

我该如何解决这个问题

---

谢谢

将第一次查询限制为1篇帖子。在第一个循环中，将carousel项目类设置为active。重置查询并运行第二个循环，偏移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>

第一张幻灯片
剩余幻灯片

为了避免查询两次，可以在循环外部将变量设置为1。在循环中，当“active”类等于1时，添加它，然后递增它

<?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();
?>

具有自定义post类型的Bootstrap 3（此处命名为“Dipositives”）：





这就是我提出的解决方案：

<?php
 $args = array(
 'post_type'      => 'slides',
 'oderby'         => 'menu_order',
 'posts_per_page' => -1
 );

$slides = new WP_Query( $args );

if( $slides->have_posts() ): ?>
<div class="row">
  <div class="col-xs-12">
      <!--Twitter bootstrap Photo carrousel-->
  <div id="myCarousel" class="carousel slide center-block"     data-ride="carousel" >
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
        <li data-target="#myCarousel" data-slide-to="4"></li>
    </ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <?php while( $slides->have_posts() ) : $slides->the_post(); $index++ ?>

      <?php if ( $index == 1 ): ?>
        <div class="item active">
      <?php else: ?>
        <div class="item">
      <?php endif; ?>
      <?php $url = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
            <img src="<?php echo $url; ?>" alt="<?php the_title(); ?>">
        </div>
  <?php endwhile; ?>
<?php endif; ?>
      <!-- Left and right controls -->
    <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>
  </div>
</div><!-- carrousel ends here -->







“alt=”“>

我通过观看以下视频了解到了这一点：由用户Ezer Sanbe制作。全部归功于他

此用户的youtube视频或频道不再可用，抱歉

希望这有帮助

<div id="carousel-1" class="carousel slide">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <?php 
            $slider = new WP_Query(array(
                'post_type' => 'slider',
                'posts_per_page'    => 7,
            ));
        ?>

        <?php 
        if ( have_posts() ) {
            $x=0;
            while ( $slider->have_posts() ) {
                $x++;
                $slider->the_post(); ?>

                <!-- Begin Slide 1 -->

                <div class="item <?php if($x==1){ echo 'active'; }?>">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <?php the_post_thumbnail('slider-img'); ?>
                    <?php endif; ?>
                    <div class="carousel-caption">
                        <h3 class="carousel-title hidden-xs"><?php the_title(); ?></h3>
                        <p class="carousel-body"><?php the_content(); ?></p>
                    </div>
                </div>

                <!-- End Slide 1 -->

            <?php } // end while
            wp_reset_postdata();
        } // end if
        ?>


    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators visible-lg">
        <?php 
            for($i=0; $i<$x; $i++){ ?>
                <li data-target="#carousel-1" data-slide-to="<?php echo $i; ?>" class="<?php if( $i==0 ){echo 'active'; }?>"></li>
            <?php }
        ?>
    </ol>

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

在WordPress中集成无插件引导旋转木马

    <!-- Carousel items -->
    <div class="carousel-inner">
    <?php $slider = new WP_Query(array(
        'post_type' => 'slider',
        'posts_per_page'    => 1,
    )); ?>
    <?php 
    if ( have_posts() ) {
        $x=0;
        while ( $slider->have_posts() ) {
            $x++;
            $slider->the_post(); ?>
                <div class="<?php if($x==1){echo 'active'} ?> item">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <?php the_post_thumbnail(); ?>
                        </a>
                    <?php endif; ?>
                </div>
        <?php } // end while
    } // end if
    ?>


    </div>
    <!-- Carousel nav -->

     <ol class="carousel-indicators">
        <?php for($i=0; $i<$x; $i++; ) { ?>
            <li data-target="#carousel" data-slide-to="<?php echo $i;  ?>" class="<?php if($i==0){ echo 'active' }?>"></li>
        <?php } ?>
    </ol>

    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>



嘿@feub----转盘指示器停在10位---你知道在哪里可以找到代码来改变这个吗（我想是bootstrap.js。几周前我写了一篇文章试图解决这个问题，但却得到了一个没有答案的风滚草徽章。您好@feub您应该在激活之前有空间，像这样“激活”，否则结果将是
itemsactive
而不是
itemsactive
，所以代码应该是
您的链接不起作用。。是的，您是对的。对不起，似乎视频和频道都不再可用了
    <!-- Carousel items -->
    <div class="carousel-inner">
    <?php $slider = new WP_Query(array(
        'post_type' => 'slider',
        'posts_per_page'    => 1,
    )); ?>
    <?php 
    if ( have_posts() ) {
        $x=0;
        while ( $slider->have_posts() ) {
            $x++;
            $slider->the_post(); ?>
                <div class="<?php if($x==1){echo 'active'} ?> item">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <?php the_post_thumbnail(); ?>
                        </a>
                    <?php endif; ?>
                </div>
        <?php } // end while
    } // end if
    ?>


    </div>
    <!-- Carousel nav -->

     <ol class="carousel-indicators">
        <?php for($i=0; $i<$x; $i++; ) { ?>
            <li data-target="#carousel" data-slide-to="<?php echo $i;  ?>" class="<?php if($i==0){ echo 'active' }?>"></li>
        <?php } ?>
    </ol>

    <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
</div>