0

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:

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. I wonder if I need to add everything inside a flexible content field or something? Not sure right now, but the second repeater example seems like it should work.

closed as off-topic by kraftner, Dave Romsey, cjbj, Jack Johansson, Howdy_McGee Jun 21 '17 at 21:06

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • What does it mean "Non-Working PHP"? Does it produce some HTML? If so, which part of it? Also, have_rows() and get_sub_field() are not native WordPress functions making your question off-topic. – Max Yudin Jun 7 '17 at 6:58
  • You're off topic :P. Kidding, I know what you mean and I am ever so sorry. I added an answer below. This seemed to work well for me. – rw1982 Jun 7 '17 at 15:03
0

Ok I figured it out! The setup is a little different but it works great.

PHP / HTML Working Code

<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 Working Code

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

My ACF Setup enter image description here

Now this is just the basic functionality. If anyone wants to use this they will still have to do some extra CSS & JS.

Not the answer you're looking for? Browse other questions tagged or ask your own question.