在 Flexslider 2 中使用高级自定义字段需要帮助

Question

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

我希望滑块以完全相同的格式再旋转 2-3 个艺术家简历，蓝色背景充当滑块容器。我使用 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>

有人可以帮忙吗？

Screenshot of correct styling

Answer 1

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

FlexSlider 为每张幻灯片使用单独的 <li>，但您的 ACF 循环 inside 您的 <li>... 您需要将其移到外面并为每个幻灯片创建一个新的 <li>你想要的幻灯片。

假设在您添加 ACF 字段之前，此 html 适用于您的滑块，您的代码应如下所示（请参阅 cmets 中的 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; ?>