高级自定义字段（ACF Pro）+平滑滑块+ Wordpress

Question

我正在使用ACF Pro与Slick Slider制作滑块轮播。 我可以将其与基本库字段一起使用，但是当我尝试显示具有多个子字段的转发器字段时，甚至无法显示它。 我不确定自己在做什么错，但是我已经玩了一段时间了，我觉得自己已经差不多一半了。

工作的PHP

<!-- Slider 1 -->


<?php
//Fields
//slider_portfolio = Gallery Field

  $images = get_field('slider_portfolio');

  if( $images ): ?>

  <div class="slider-for">

  <?php foreach( $images as $image ): ?>

  <div class="slick-container">
    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
  </div>

  <?php endforeach; ?>

  </div>

<?php endif;  ?>

非工作PHP

这是我尝试使用的版本。 当前是转发器字段中的一个图像子字段。

领域：

lider_image =字段（中继器字段）

Portfolio_slider =子字段（图像字段）

<!-- Slider 2 -->


        <?php
        //Image Slider
        //slider_image = field (repeater field)
        //portfolio_slider = subfield (image field)

        function agero_slider() {

          if( have_rows('slider_image') ):
              echo '<div class="slider-for">';
             // loop through the rows of data

          while ( have_rows('slider_image') ) : the_row();

             // display a sub field value
             //vars
             $image = get_sub_field('portfolio_slider');
          ?>

          <div><img src="<?php echo $image['url']; ?>"/></div>

        <?php

          endwhile;
            echo '</div>
             <div class="slider-nav">';
             // loop through the rows of data
          while ( have_rows('slider_image') ) : the_row();
             // display a sub field value
             //vars
          $image = get_sub_field('portfolio_slider');

        ?>

        <div><img src="<?php echo $image['url']; ?>"/></div>

        <?php
          endwhile;
            echo '</div>';
          else :
             // no rows found
          endif;
        }

        ?>

JS代码 即使我需要在此基础上，它也能正常工作。

jQuery(document).ready(function($){
$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   asNavFor: '.slider-for',
   focusOnSelect: true,
   fade: true,
   autoplay: false
  });
});

我不确定为什么第一个代码有效，而第二个代码却无效。

相关链接：

ACF- https://www.advancedcustomfields.com/resources/code-examples/

光滑-http: //kenwheeler.github.io/slick/

我用作入门入门指南的教程-http : //wpbeaches.com/coding-a-slider-with-slick-and-acf-pro-in-wordpress/

如果有人可以建议我做错了什么，或者建议一种具体的方法来显示多幻灯片轮播中的多个自定义字段，其中文本字段随每个幻灯片图像而变化。 完成这项工作后，我可以通过将每个转发器字段做成一张可以通过UI更新的幻灯片来扩展它。

我想也许我正在解决这个错误。 也许我需要在灵活的内容字段中添加所有内容？ 目前尚不确定，但是第二个示例似乎应该起作用。

Answer 1

领域：

lider_image =字段（中继器字段）

Portfolio_slider =子字段（图像字段）

ACF中继器映像代码：

<?php
if( have_rows('slider_image',get_the_ID()) ) {

    if( have_rows('slider_image',get_the_ID()) ):
    while ( have_rows('slider_image',get_the_ID()) ) : the_row();
        ?>
        <img src="<?php echo get_sub_field('portfolio_slider', get_the_ID()); ?>"/>
        <?php
    endwhile;
    endif;

} 
?>

Answer 2

好吧，我想通了！ 设置有些不同，但是效果很好。

PHP / HTML工作代码

<section class="dev-slider-wrppr">
  <div class="dev-slider-row">
    <div class="slider-for">
      <?php if( have_rows('slider_content') ): ?>
        <?php while( have_rows('slider_content') ): the_row(); ?>
           <?php
            $slideimage = get_sub_field('slider_image');
            $slidetitle = get_sub_field('slider_title');
            $slidebdycpy = get_sub_field('slider_body_copy');
            ?>
            <div class="slick-container">
              <h4 class="info-title text-center"><?php echo $slidetitle; ?></h4>
              <p class="description"><?php echo $slidebdycpy; ?></p>
              <img src="<?php echo $slideimage['url']; ?>" alt="<?php echo $slideimage['alt']; ?>" />
            </div>
        <?php endwhile; ?>
    <?php endif; ?>
  </div>
</section>

JS工作代码

jQuery(document).ready(function($){
$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   asNavFor: '.slider-for',
   focusOnSelect: true,
   fade: true,
   autoplay: false
   });
});

我的ACF设置

现在，这只是基本功能。 如果有人想使用它，他们仍然必须做一些额外的CSS和JS。