Using Repeater with WP Loop and Slick Slider filtering

• jwright86

• April 10, 2023 at 4:24 pm

Hello all,
Long time user of ACF Pro and I am a little stuck trying to think through how to do this.

I have created a Custom Post Type and I am using ACF for displaying individual elements of a post (cpt post) like image, name, etc. The goal is to use Slick Slider to display these in a carousel and then use buttons outside of the Slick Slider to filter the selected categories to show specific posts in the slider. This is for a museum showing people in a hall of fame, so it would be showing everyone, then you can tap the categories to filter down to specifics, like culinary folks, business folks, women, etc.

I have created the arguments to display the posts and Slick Slider elements. Where I am lacking is making this dynamic. Here is an example of how Slick’s filtering works: https://codepen.io/chiz-developer/pen/ybxBKy and we want it to work just like this, but the colors you see here dynamically from selections made on an ACF field on the page that this is all going to be displayed on. Below is my code so far.

<section class="row">
      <?php
      $slider_args  = array(
          'post_type'      => 'inductees',
          'posts_per_page' => -1,
          'orderby' => 'date',
          'order' => 'DSC',
        //   'tax_query' => array(
        //     array(
        //         'taxonomy' => 'inductee_categories',
        //         'field' => 'slug',
        //         'terms' => 'Women'
        //     )
        // )
      );
      $slider_query = new WP_Query( $slider_args ); ?>
        <div class="kiosk-screen">
          <?php if( $slider_query->have_posts() ){ 
            while( $slider_query->have_posts() ){ $slider_query->the_post(); ?>
            <div class="kiosk-individual">
              <img src="<?php the_field('photo_2'); ?>" class="img-fluid">
              <div class="card-body">
                <h5 class="card-title"><?php the_field('first_name'); ?> <?php the_field('last_name'); ?></h5>
                <p class="card-text"><?php the_field('graduated_hs'); ?></p>
              </div>
            </div>
          <?php }
            } else { ?>
          <p>No inductees found.</p>
      <?php } wp_reset_postdata(); ?>
        </div>
        <div class="row">
          <div class="filtering">
            <?php if( have_rows('categories') ): ?>
            <?php while( have_rows('categories') ): the_row(); ?>
            <ul class="filter">
              <li data-filter="<?php the_sub_field('inductee_category'); ?>" class="<?php the_sub_field('inductee_category'); ?>"><?php the_sub_field('inductee_category'); ?></li>
            </ul>
            <?php endwhile; ?>
            <?php endif; ?>
          </div>
		</section>