Need help using Advanced Custom Fields with Flexslider 2

Question

I am trying to produce a basic slider in Wordpress using ACF & Flexslider 2. I want to show text on the left & an image on the right, like the arrangement I've created in the attached screenshot.

I want the slider to rotate out 2-3 more artist bios in this exact same format with the blue background acting as the slider container. I successfully created custom fields using an ACF repeater, with subfields for the name, title, bio text, and image. The problem I'm having is that after I create the repeater, flexslider doesn't show up at all and instead I can see all of my repeater fields at once, like this: theg8.com/about-the-art/

Here is the PHP in my template file:

<li class="mason__grid-col col__full artist-highlight-section">
 <?php if( have_rows('artist_slider') ): ?>
  <div class="col-12 artist-info">
   <?php while( have_rows('artist_slider') ): the_row(); ?>
    <div class="artist-info-left col-lg-6 col-md-6 col-sm-12">
      <h2><?php the_sub_field('artist_name'); ?>
      </h2>
      <h3><?php the_sub_field('artist_title'); ?></h3>
      <p><?php the_sub_field('artist_bio'); ?></p>
     </div>
    <div class="artist-image-right col-lg-4 col-md-6 col-sm-12">
     <figure>
       <?php
         $image = get_sub_field('artist_image');
         $imageurl = $image['sizes']['slider'];
         ?>
       <li class="lazy"><img src="<?php echo $imageurl; ?>"></li>
      </figure>
     </div>
    <?php endwhile; ?>
   </div><!-- ends col-12 -->
 <?php endif; ?>
</li>

Anyone able to help?

Screenshot of correct styling

FluffyKitten FluffyKitten · Accepted Answer · 2020-07-07T01:26:40

You are adding all of the slider information into just one slide.

FlexSlider uses a separate <li> for each slide, but you have your ACF loop inside your <li>... you need to move it outside and created a new <li> for each slide you want.

Assuming this this html works for your slider before you added the ACF fields, your code should look like this (See setps 1 and 2 in the comments, and don't forget to change your ending tags to match!):

<?php  /* 1. loop through the ACF rows first... */ ?>

<?php if( have_rows('artist_slider') ): ?>
  <?php while( have_rows('artist_slider') ): the_row(); ?>

   <?php  /* 2. then for each 'artist_slider' row, 
                create a new <li> and fill it with the details from the ACF row */ ?>

   <li class="mason__grid-col col__full artist-highlight-section">
      <div class="col-12 artist-info">
          <div class="artist-info-left col-lg-6 col-md-6 col-sm-12">
            <h2><?php the_sub_field('artist_name'); ?></h2>
            <h3><?php the_sub_field('artist_title'); ?></h3>
            <p><?php the_sub_field('artist_bio'); ?></p>
          </div>
          <div class="artist-image-right col-lg-4 col-md-6 col-sm-12">
           <figure>
             <?php
               $image = get_sub_field('artist_image');
               $imageurl = $image['sizes']['slider'];
               ?>
             <li class="lazy"><img src="<?php echo $imageurl; ?>"></li>
           </figure>
         </div>
       </div><!-- ends col-12 -->
    </li>
  <?php endwhile; ?>
<?php endif; ?>

Need help using Advanced Custom Fields with Flexslider 2

1 Answers