Question

我正在尝试使用来自高级自定义字段图库字段的图像的指标填充bootstrap4轮播。我正在WordPress上使用Understrap主题。

<?php $pictures = get_field("clinic_images");?>

<section>
    <div class="container">
        <div class="row justify-content-center">
            <h3>Our clinic</h3>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <?php if($pictures):?>
                <div class="carousel-inner">
                    <?php foreach( $pictures as $picture ): ?>
                    <div class="carousel-item active">
                        <img src="<?php echo $picture['url']; ?>" class="d-block w-100" alt="<?php echo $picture['alt']; ?>">
                    </div>
                    <?php endforeach; ?>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section> ```

The first picture is displaying, the controls aren't displaying, unable to navigate through pictures; expecting pictures to switch automatically and being able to switch manually with controls or clicking the indicators.

Answer 1

按照BS4 Carousel Docs：

.active类需要添加到一张幻灯片中。除此以外，转盘将不可见。

因此，您需要做的是将活动类添加到仅来自ACF Gallery循环的第一个图像中。一种简单的方法是在foreach循环中添加一个计数器，并在循环的每次迭代中检查该计数器的编号

<div class="carousel-inner">
    <?php 

    $i = 0; $add_class = '';

    foreach( $pictures as $picture ): 

    if ($i == 0 ) { $add_class = ' active'; } else { $add_class = ''; }

    ?>
    <div class="carousel-item<?php echo $add_class; ?>">
        <img src="<?php echo $picture['url']; ?>" class="d-block w-100" alt="<?php echo $picture['alt']; ?>">
    </div>
    <?php $i++; endforeach; ?>
</div>

使用modulo

的方法可能略短一些

Answer 2

感谢您的帮助，它现在正在运行。

<?php $pictures = get_field("clinic_images");?>
<section>
    <div class="container">
        <div class="row justify-content-center">
            <h3 class="clinic">Our clinic</h3>
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
                <div class="carousel-inner">
                <?php
                $i = 0; $add_class = '';?>
                <?php foreach( $pictures as $picture ): 
                if ($i == 0 ) { $add_class = 'active'; } else { $add_class = ''; }
                    ?>
                    <div class="carousel-item <?php echo $add_class; ?>">
                        <img class="d-block w-100 clinicImage" src="<?php echo $picture['url']?>" alt="<?php echo $picture['alt']; ?>">
                    </div>
                <?php $i++; endforeach; ?>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</section>

使用带有高级自定义字段画廊字段的指示器填充bootstrap4轮播

2 个答案: