Question

我正在使用ACF Pro制作带滑块滑块的滑块旋转木马。我可以使用基本的库字段来工作，但是当我尝试显示具有多个子字段的转发器字段时，我甚至没有显示它。我不确定我做错了什么，但我已经玩了一段时间了，我觉得我有点儿＆＃39;一半在那里。

使用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

这是我试图开始工作的版本。它目前是转发器字段中的一个图像子字段。

字段：

slider_image = field（转发器字段）

portfolio_slider = subfield（image field）

<!-- 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

字段：

slider_image = field（转发器字段）

portfolio_slider = subfield（image field）

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＆amp; JS。

高级自定义字段（ACF Pro）+ Slick Slider + Wordpress

2 个答案: