Javascript 高级自定义字段（ACF Pro）和#x2B；光滑滑块+；Wordpress

我正在使用ACF Pro制作一个滑动旋转木马，带有光滑的滑动条。我可以让它与一个基本的画廊领域，但我甚至没有让它显示，当我试图显示一个转发器领域与几个子领域。我不确定我到底做错了什么，但我已经玩了一段时间了，我觉得我有点“一半”

工作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;  ?>

我不知道为什么第一个代码可以工作，但是第二个代码不能

相关链接：

ACF-

光滑-

我正在使用的教程作为入门指南-

如果有人可以建议我做错了什么，或者可以建议一种具体的方法，在多幻灯片旋转木马中显示多个自定义字段，其中文本字段随每张幻灯片图像的变化而变化。一旦我开始工作，我可以通过使每个repeater字段成为一张幻灯片来扩展它，可以通过UI进行更新

我想我可能做错了。也许我需要在一个灵活的内容字段或其他内容中添加所有内容？现在还不确定，但第二个示例似乎应该有效。

字段：

滑块\图像=字段（中继器字段）

公文包_滑块=子字段（图像字段）

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;

} 
?>

"/>

字段：

滑块\图像=字段（中继器字段）

公文包_滑块=子字段（图像字段）

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;

} 
?>

"/>

好的，我想出来了！设置有点不同，但效果很好

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>

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。

好的，我想出来了！设置有点不同，但效果很好

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>

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，当您调用

get_field（）

获取滑块字段时，它将返回一个包含所有子字段的数据结构，无论深度如何。运行

$data=get_field（'slider_field'）

，其中

slider_field

是顶级滑块字段的名称，然后调用

var_dump（$data）

，然后查看页面源代码，您将能够看到结构中包含的数据的结构化表示，让你知道如何循环完成这一切。哥们，我有一个更简单的版本，你可以有。。。我在工作，它在我家的机器上。。。我一到家就把它贴上去you@ThomasWithers请做！我可以让幻灯片显示为带有图像的转发器。但我真正想要的是在每张幻灯片中显示一组子字段。例如，每张幻灯片的文本字段、文本区域字段和图像字段。我想知道在这种情况下是否需要将图像设置为背景图像？似乎我可以一起回显每个滑块的字段，并使用css将文本放置在图像上。使用ACF，当您调用

get_field（）

获取滑块字段时，它将返回一个包含所有子字段的数据结构，无论深度如何。运行

$data=get_field（'slider_field'）

，其中

slider_field

是顶级滑块字段的名称，然后调用

var_dump（$data）

，然后查看页面源代码，您将能够看到结构中包含的数据的结构化表示，让你知道如何循环完成这一切。哥们，我有一个更简单的版本，你可以有。。。我在工作，它在我家的机器上。。。我一到家就把它贴上去you@ThomasWithers请做！我可以让幻灯片显示为带有图像的转发器。但我真正想要的是在每张幻灯片中显示一组子字段。例如，每张幻灯片的文本字段、文本区域字段和图像字段。我想知道在这种情况下是否需要将图像设置为背景图像？看起来我可以将每个滑块的字段放在一起，然后用css将文本放在图像上。是的，这是我用一个子字段作为幻灯片所能做到的。这绝对是我开始时的选择。我需要扩展到多大程度才能为每张幻灯片包含文本字段、文本区域字段和图像字段？这才是我真正想要的。它似乎不仅仅是在图像字段之后添加所需的字段。我是否必须在repeater/flex内容字段中放置一个repeater，并将子repeater显示为数组或其他内容？如果是这样，我该怎么做？标题和内容的repeater子字段是什么？基本上，我只是尝试在光滑旋转木马的每张幻灯片上显示一个“+”“+图像（作为背景图像）。我想要大约三张幻灯片。我尝试过许多方法，其中每一个集合都位于repeater字段或flexible content字段中。以上代码是我能得到的最接近的代码（到目前为止），正如您所看到的，第二个代码片段不起作用。正因为如此，我认为我做得不对。我添加的教程链接适用于单个图像示例，但我需要在每个光滑幻灯片中包含多个字段。子字段是1个文本字段和1个多行文本字段（每个幻灯片）+背景图像OK 1。在没有转发器的情况下共享您的域名2。具有转发器主字段名和子字段名3。也分享你的滑块代码。是的，这是我能得到的关于幻灯片的子字段。这绝对是我开始时的选择。我需要扩展到多大程度才能为每张幻灯片包含文本字段、文本区域字段和图像字段？这才是我真正想要的。它似乎不仅仅是在图像字段之后添加所需的字段。我需要在一个房间里放一个中继器吗