仅在有图像时才显示轮播。 （使用高级自定义字段添加图像的Wordpress站点中的Bootstrap轮播）

Question

我有一个自定义帖子类型，可能包含也可能不包含要在轮播/幻灯片中显示的图像。如果通过高级自定义字段添加到帖子中的图像，我该如何才能显示轮播？下面是我到目前为止的代码。除了没有与帖子相关联的图像之外，它还可以工作，前端仍然显示轮播控件等等。

为了进一步说明这一点，我们很高兴知道如何使用添加的图像数量自动填充指标。截至目前，我已将指标评论出来。

<!-- slideshow -->
<div id="myCarousel" class="carousel slide" 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>
    </ol> -->

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <?php if( have_rows('timeline_images') ): ?>
            <?php while( have_rows('timeline_images') ): the_row(); 
                // vars
                $image = get_sub_field('timeline_image');
                ?>

                <div class="item">
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" title="<?php echo $image['title'] ?>" />
                </div>

            <?php endwhile; ?>
        <?php endif; ?>
    </div>

    <!-- 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>
<!-- /slideshow -->

Answer 1

您可以对指标执行与对图像相同的操作（未经测试）：

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">      
       <?php if( have_rows('timeline_images') ): ?>
          <?php 
             $carrousselCount = 0;
             while( have_rows('timeline_images') ): the_row();
             $carrousselCount++;
          ?> 
            // indicators
            <li data-target="#myCarousel" data-slide-to="<?php echo $carrousselCount ?>" class="<?php echo $carrousselCount === 0 ? 'active' : '' ?>"></li>
          <?php endwhile; ?>
       <?php endif; ?>
      <!-- end ol -->
    </ol>
   </div>