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

Question

I am using ACF Pro to make a slider carousel with Slick Slider. I can get it to work with a basic gallery field but I am not even getting it to show when I try to display a repeater field with several sub fields. I am not sure exactly what I am doing wrong but I have been playing with this for a while, and I feel like I am kinda' half there.

Working 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;  ?>

Non-Working PHP

This is the version I am trying to get to work. It is currently one image sub field inside a repeater field.

Fields:

slider_image = field (repeater 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 Code This works, even though I need to build on it.

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

I'm not sure why the first code is working but the second is not.

Relevant links:

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

Slick - http://kenwheeler.github.io/slick/

The Tutorial that I am using as a rough guide to get started - http://wpbeaches.com/coding-a-slider-with-slick-and-acf-pro-in-wordpress/

If anyone can suggest what I am doing wrong or maybe suggest a concrete way to display multiple custom fields within a multi slide carousel where the text fields change with each slide image. Once I get this working I can expand it by making each repeater field a slide that can be updated through the UI.

I think maybe I am going about this wrong. Maybe I need to add everything inside a flexible content field or something? Not sure right now, but the second example seems like it should work.

With ACF, when you call get_field() to get the slider field, it will return a data structure that contains all child-fields, no matter the level of depth. Run $data = get_field('slider_field'), where slider_fieldis the name of the top-level slider field, and then call var_dump($data), and then view the page source, and you'll be able to see a structured representation of the data contained in the structure, allowing you to get an idea of how to loop through it all. — thephpdev
Dude, I have a much simpler version of this you can have... I'm at work and it's on my home machine... As soon as I'm home I'll post it up for you — Tom Withers
@ThomasWithers Please do! I can sort-of get the slide to show as a repeater with an image. But what I am really after is to display a set of sub fields within each slide. For example, a text field, text-area field, and an image field for each slide. I wonder if I need to set the image as a bg in that case? Seems like I can just echo the fields for each slider together and lay the text over the image with css. — rw1982

Shital Marakana Shital Marakana · Accepted Answer · 2017-06-06T13:31:43

Fields:

slider_image = field (repeater field)

portfolio_slider = subfield (image field)

ACF repeater image Code:

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

} 
?>

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

2 Answers