ACF 自定义字段、自定义 Post 类型和 Bootstrap 轮播

Question

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

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

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

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

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

    <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) 并基于幻灯片编号 - echo active class.

<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

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

   <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（变量必须命名为 $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>

ACF 自定义字段、自定义 Post 类型和 Bootstrap 轮播

ACF Custom Fields, Custom Post Types and Bootstrap Carousel

php

wordpress

advanced-custom-fields