Question

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

这些字段正在遍历，但我对所有轮播项目都处于活动状态感到困扰，这导致它们彼此重叠。

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

我知道解决方案是添加一个带有$ num的php代码段，以控制哪些幻灯片处于活动状态，但我无法确定在循环中的位置或添加方式。

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

"rules": {
  // note you must disable the base rule as it can report incorrect errors
  "no-use-before-define": "off",
  "@typescript-eslint/no-use-before-define": ["error"]
}

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

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）。 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自定义字段，自定义帖子类型和自举轮播

2 个答案: