Image Carousel data-slide-to =“？”使用WordPress PHP

Question

I have a custom post type in WordPress to add a list of featured images to. These featured images are pulled into a Bootstrap carousel via WP_Query.

Everything is working great: images are being pulled fine and I've managed to get the carousel indicators to show up if a thumbnail exists. I currently have 3 in the custom post type.

My question is this: normally (statically) one would create the carousel indicators with a list and there is a data-slide-to="0", "1", "2", etc. to allow you to click the indicator to view the slide for each one.

When working with WordPress and PHP, how can I set it up so it knows to count up from Zero automatically, based on the number of slides?

In the following code, it's setup up manually and will work fine for 1 and 2 but any slides added in addition will take on the number 1 as its data-slide-to number.

<div class="featured-carousel">
        <div class="carousel-shadow">
          <div id="carousel-home-featured" class="carousel-fade slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <?php 
    $items = new WP_Query(array(
    'post_type' => 'home-slider', 
    'posts_per_page' => 1
    )); 
   while ( $items->have_posts() ) : 
   $items->the_post();
  ?>
              <?php 

if ( '' != get_the_post_thumbnail() ) { ?>
              <li data-target="#carousel-home-featured" data-slide-to="0" class="active"></li>
              <?php } else { ?>
              <?php } ?>
              <?php endwhile;  ?>
              <?php 
    $items = new WP_Query(array(
    'post_type' => 'home-slider', 
    'posts_per_page' => 10,
    'offset' => -1,
    )); 
   while ( $items->have_posts() ) : 
   $items->the_post();
  ?>
              <?php 

if ( '' != get_the_post_thumbnail() ) { ?>
              <li data-target="#carousel-home-featured" data-slide-to="1"></li>
              <?php } else { ?>
              <?php }


?>
              <?php endwhile;  ?>
            </ol>
            <div class="carousel-inner">
              <?php 
    $items = new WP_Query(array(
    'post_type' => 'home-slider', 
    'posts_per_page' => 1
    )); 
   while ( $items->have_posts() ) : 
   $items->the_post();
   $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
   $custom = get_post_custom($post->ID);
   $link = $custom["more-link"][0];
  ?>
              <div class="item active" id="<? the_ID(); ?>"> <a href="<?php echo $link; ?>"> <?php echo get_the_post_thumbnail($post->ID, 'full', array('class'=>"img-responsive"));?> </a> </div>
              <?php endwhile;  ?>
              <?php 
    $items = new WP_Query(array(
    'post_type' => 'home-slider', 
    'posts_per_page' => 10,
    'offset' => -1,
    )); 
   while ( $items->have_posts() ) : 
   $items->the_post();
   $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
   $custom = get_post_custom($post->ID);
   $link = $custom["more-link"][0];
  ?>
              <div class="item" id="<? the_ID(); ?>"> <a href="<?php echo $link; ?>"> <?php echo get_the_post_thumbnail($post->ID, 'full', array('class'=>"img-responsive"));?> </a> </div>
              <?php endwhile;  ?>
            </div>
          </div>
        </div>
      </div>

Answer 1

You can do it using just one WP_Query call and actually fetch only the items with featured images by passing the 'meta_key' => '_thumbnail_id' parameter to WP query. I'd revise your code to:

<?php 
$items = new WP_Query(array(
'post_type' => 'home-slider',
'posts_per_page' => 10,
'meta_key' => '_thumbnail_id'
));
$count = $items->found_posts;
?>
<div class="featured-carousel">
  <div class="carousel-shadow">
    <div id="carousel-home-featured" class="carousel-fade slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-home-featured" data-slide-to="0" class="active"></li>
        <?php for($num = 1; $num < $count; $num++){ ?>
        <li data-target="#carousel-home-featured" data-slide-to="<?php echo $num; ?>"></li>
        <?php } ?>
      </ol>
      <div class="carousel-inner">
        <?php 
        $ctr = 0;
        while ( $items->have_posts() ) :
          $items->the_post();
          $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
          $custom = get_post_custom($post->ID);
          $link = $custom["more-link"][0];
          $class = $ctr == 0 ? ' active' : '';
        ?>
        <div class="item<?php echo $class; ?>" id="<? the_ID(); ?>"> <a href="<?php echo $link; ?>"> <?php echo get_the_post_thumbnail($post->ID, 'full', array('class'=>"img-responsive"));?> </a> </div>
        <?php $ctr++; 
        endwhile;  ?>

      </div>
    </div>
  </div>
</div>