我正在使用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"]
}
答案 0 :(得分:0)
您必须根据幻灯片编号添加计数器($ 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>
答案 1 :(得分:0)
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>