ACF 自定义字段、自定义帖子类型和引导轮播

Question

我正在使用 ACF 和自定义帖子在 Wordpress 中使用 Understrap/Bootstrap 和 CMS 系统构建前端。我正在尝试集成一个轮播，显示产品图像和从自定义帖子类型中获取的信息。

这些字段正在通过，但我遇到了一个问题，即所有轮播项目都处于活动状态，这导致它们相互重叠。

我在使用 ACF 转发器字段时看到了类似的问题，但在使用帖子类型时却没有。

我知道解决方案是添加一个带有 $num 的 php sn-p 来控制哪些幻灯片处于活动状态，但我不知道在哪里或如何在循环中添加代码。

代码如下，感谢任何帮助、建议或相关答案。谢谢

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<?php $featured_posts = get_field('ski_category');

if( $featured_posts ): ?>   

<div class="carousel-inner">

<?php foreach( $featured_posts as $post ): 

// Setup this post for WP functions (variable must be named $post).
setup_postdata($post); ?> 


    <div class="carousel-item <?php echo $active; ?>">

        <div class="row">

            <div class="col-sm-12 col-md-5 p-3">

                <img src="<?php the_field('equipment_image'); ?>">

            </div>

            <div class="col-sm-12 col-md-7 p-3">

                <h3><?php the_field('skisnowboard_name'); ?></h3>

                <?php the_field('equipment_description'); ?>
                 
                 <small class="text-muted"><?php the_field('user_level'); ?></small>


            </div>

        </div>
</div>

<?php endforeach; ?>  

</div>

<?php 
// Reset the global post object so that the rest of the page works correctly.
wp_reset_postdata(); ?>

<?php endif; ?> 

    <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>

Answer 1

您必须添加计数器 ($i) 并根据幻灯片编号 - 回显活动类。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<?php $featured_posts = get_field('ski_category');

if( $featured_posts ): ?>   

<div class="carousel-inner">

<?php $i = 0; $active = ''; foreach( $featured_posts as $post ): 

if ( 1 == $i ) {
  $active = 'activeSlide';
}
// Setup this post for WP functions (variable must be named $post).
setup_postdata($post); ?> 


    <div class="carousel-item <?php echo esc_attr( $active ); ?>">

        <div class="row">

            <div class="col-sm-12 col-md-5 p-3">

                <img src="<?php the_field('equipment_image'); ?>">

            </div>

            <div class="col-sm-12 col-md-7 p-3">

                <h3><?php the_field('skisnowboard_name'); ?></h3>

                <?php the_field('equipment_description'); ?>
                 
                 <small class="text-muted"><?php the_field('user_level'); ?></small>


            </div>

        </div>
</div>

<?php $i++; endforeach; ?>  

</div>

<?php 
// Reset the global post object so that the rest of the page works correctly.
wp_reset_postdata(); ?>

<?php endif; ?> 

    <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>

Answer 2

上面伊万的回答给了我解决方案。第一张幻灯片需要处于活动状态才能正确实施轮播。我使用的代码如下，以防它对其他人有用：

   <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<?php $featured_posts = get_field('ski_category');

if( $featured_posts ): ?>   

<div class="carousel-inner">
<?php $i = 0; $active = 'active'; foreach( $featured_posts as $post ): 

    if ( 1 == $i ) {
$active = '';
    }

// 为 WP 函数设置这个帖子（变量必须命名为 $post）。 setup_postdata($post); ?>

    <div class="carousel-item <?php echo esc_attr( $active ); ?>">

        <div class="row">

            <div class="col-sm-12 col-md-5 p-3">

                <img src="<?php the_field('equipment_image'); ?>">

            </div>

            <div class="col-sm-12 col-md-7 p-3">

                <h3><?php the_field('skisnowboard_name'); ?></h3>

                <?php the_field('equipment_description'); ?>
                 
                 <small class="text-muted"><?php the_field('user_level'); ?></small>


            </div>

        </div>
</div>

<?php $i++; endforeach; ?>

</div>

<?php 
// Reset the global post object so that the rest of the page works correctly.
wp_reset_postdata(); ?>

<?php endif; ?> 

    <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>