高级自定义字段 (ACF Pro) + Slick Slider + 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

这是我要开始工作的版本。它目前是中继器字段内的一个图像子字段。

字段：

slider_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

字段：

slider_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.

高级自定义字段 (ACF Pro) + Slick Slider + Wordpress

Advanced Custom Fields (ACF Pro) + Slick Slider + Wordpress

javascript

php

wordpress

jquery

advanced-custom-fields