需要有关将高级自定义字段与弹性滑块 2 结合使用的帮助

Question

我正在尝试使用ACF和Flexslider 2在WordPress中生成一个基本的滑块。我想在左侧显示文本，在右侧显示图像，就像我在随附的屏幕截图中创建的排列一样。

我希望滑块以完全相同的格式旋转出 2-3 个艺术家 bios，蓝色背景充当滑块容器。我使用 ACF 中继器成功创建自定义字段，其中包含名称、标题、生物文本和图像的子字段。我遇到的问题是，在我创建中继器后，flexslider 根本不显示，相反，我可以一次看到我所有的中继器字段，如下所示： theg8.com/about-the-art/

这是我的模板文件中的 PHP：

<li class="mason__grid-col col__full artist-highlight-section">
<?php if( have_rows('artist_slider') ): ?>
<div class="col-12 artist-info">
<?php while( have_rows('artist_slider') ): the_row(); ?>
<div class="artist-info-left col-lg-6 col-md-6 col-sm-12">
<h2><?php the_sub_field('artist_name'); ?>
</h2>
<h3><?php the_sub_field('artist_title'); ?></h3>
<p><?php the_sub_field('artist_bio'); ?></p>
</div>
<div class="artist-image-right col-lg-4 col-md-6 col-sm-12">
<figure>
<?php
$image = get_sub_field('artist_image');
$imageurl = $image['sizes']['slider'];
?>
<li class="lazy"><img src="<?php echo $imageurl; ?>"></li>
</figure>
</div>
<?php endwhile; ?>
</div><!-- ends col-12 -->
<?php endif; ?>
</li>

有人能帮忙吗？

正确样式的屏幕截图

Answer 1

您将所有滑块信息添加到一张幻灯片中。

FlexSlider 为每张幻灯片使用单独的<li>，但您的 ACF 循环在您的<li>内......您需要将其移出，并为所需的每张幻灯片创建一个新<li>。

假设此 html 适用于您添加 ACF 字段之前的滑块，您的代码应如下所示(请参阅注释中的 setps 1 和 2，不要忘记更改结束标签以匹配！

<?php  /* 1. loop through the ACF rows first... */ ?>
<?php if( have_rows('artist_slider') ): ?>
<?php while( have_rows('artist_slider') ): the_row(); ?>
<?php  /* 2. then for each 'artist_slider' row, 
create a new <li> and fill it with the details from the ACF row */ ?>
<li class="mason__grid-col col__full artist-highlight-section">
<div class="col-12 artist-info">
<div class="artist-info-left col-lg-6 col-md-6 col-sm-12">
<h2><?php the_sub_field('artist_name'); ?></h2>
<h3><?php the_sub_field('artist_title'); ?></h3>
<p><?php the_sub_field('artist_bio'); ?></p>
</div>
<div class="artist-image-right col-lg-4 col-md-6 col-sm-12">
<figure>
<?php
$image = get_sub_field('artist_image');
$imageurl = $image['sizes']['slider'];
?>
<li class="lazy"><img src="<?php echo $imageurl; ?>"></li>
</figure>
</div>
</div><!-- ends col-12 -->
</li>
<?php endwhile; ?>
<?php endif; ?>