如何在PHP中借助ACF为Bootstrap轮播首个元素添加active类

Bootstrap轮播要求.carousel-inner下的第一个.carousel-item必须添加active类才能正常工作，以下是两种实现方案：

PHP实现（推荐） #

直接在后端渲染时给第一个轮播项添加active类，无需依赖前端JS，兼容性和性能更好。

方法1：使用计数器变量 #

初始化一个计数器，循环时判断是否为第一个元素：

<?php if( have_rows('text_block_repeater') ): ?>
   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner">
           <?php 
           $item_count = 0;
           while( have_rows('double_image') ): the_row(); 
           // 给第一个轮播项添加active类
           $carousel_class = $item_count === 0 ? 'carousel-item active' : 'carousel-item';
           ?>
           <div class="<?php echo esc_attr($carousel_class); ?>">
               <?php $image = get_sub_field('image'); if( !empty( $image ) ): ?>
                    <img class="w-100" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
               <?php endif; ?>
           </div>
           <?php 
           $item_count++;
           endwhile; ?>
       </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
   </div>
<?php endif; ?>

方法2：使用ACF自带的get_row_index()函数 #

ACF的get_row_index()会返回当前重复字段的行索引（从1开始），直接判断是否为第一行即可：

<?php if( have_rows('text_block_repeater') ): ?>
   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner">
           <?php while( have_rows('double_image') ): the_row(); 
           // 第一行添加active类
           $carousel_class = get_row_index() === 1 ? 'carousel-item active' : 'carousel-item';
           ?>
           <div class="<?php echo esc_attr($carousel_class); ?>">
               <?php $image = get_sub_field('image'); if( !empty( $image ) ): ?>
                    <img class="w-100" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
               <?php endif; ?>
           </div>
           <?php endwhile; ?>
       </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
   </div>
<?php endif; ?>

JavaScript实现 #

如果无法修改PHP代码，可以用前端JS给第一个轮播项添加active类：

原生JS版本 #

document.addEventListener('DOMContentLoaded', function() {
    const firstItem = document.querySelector('#carouselExampleControls .carousel-item:first-child');
    if (firstItem) {
        firstItem.classList.add('active');
    }
});

jQuery版本（项目已引入jQuery时使用） #

$(document).ready(function() {
    $('#carouselExampleControls .carousel-item:first').addClass('active');
});

内容的提问来源于stack exchange，提问作者chappers