在 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 循环在内部您的 <li>...您需要将其移到外部并为您想要的每张幻灯片创建一个新的 <li>。

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

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

Need help using Advanced Custom Fields with Flexslider 2

php

wordpress

flexslider

advanced-custom-fields