services-slider.php

<?php 
  $args = array( 
    'post_type' => 'service', 
    'posts_per_page' => -1 
  );
  $loop = new WP_Query( $args );
  ?>
  
  <!-- Nav Slider -->
  <div class="slider-nav">
    <?php 
      while ( $loop->have_posts() ) : $loop->the_post(); 
      $serviceWhiteIcon = get_field('white_icon');
    ?>

    <div class="nav-item">
      <div class="nav-icon-bg">
        <img src="<?php echo $serviceWhiteIcon; ?>" alt="<?php the_title(); ?>">
      </div>
      <?php 
        the_title(); 
      ?>
    </div>

  <?php endwhile; ?>
  </div> <!-- end of .slider-nav -->

  <!-- Slider -->
  <div class="slider-for">
    <?php 

    $args=array(
      'public'   => true,
      '_builtin' => false
    );
    $output = 'names'; // or objects
    $operator = 'and';
    $taxonomies=get_taxonomies($args,$output,$operator);
      while ( $loop->have_posts() ) : $loop->the_post(); 

      $slideIconLarge = get_field('main_icon');
      $slideExcerpt = get_field('service_excerpt');
      $serviceItems = get_field('service_type', 'options');
    ?>
    
    <div class="service-slide">
      <div class="slide-wrap">
        <div class="slide-img-col">
          <?php the_post_thumbnail(); ?>
        </div>

        <div class="slide-info-col">
          <div class="title-row">
            <img src="<?php echo $slideIconLarge ?>" alt="<?php the_title(); ?>">
            <h2 class="slide-title"><?php the_title(); ?></h2>
          </div>
    
          <div class="slide-content">
            <?php echo $slideExcerpt; ?>

            <div class="service-types">
              <ul>
                <?php 
                $args=array(
                  'public'   => true,
                  '_builtin' => false,
                );
                $output = 'names'; // or objects
                $operator = 'and';
                $taxonomies=get_taxonomies($args,$output,$operator); 
                if  ($taxonomies) {
                  foreach ($taxonomies  as $taxonomy ) {
                    $terms = get_terms([
                      'taxonomy' => $taxonomy,
                      'hide_empty' => false,
                    ]);
                        foreach ( $terms as $term) {
                ?>
                        <li class="taxonomy"><?php echo $term->name; ?></li>
                      <?php 
                    }
                  }
                }  
                ?>

              </ul>
            </div>
          </div>
        </div>
      </div>

      

    </div>

  <?php endwhile; ?>
  </div> <!-- end of .slider-for -->

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  jQuery('.slider-nav').slick({
    slidesToShow: 7,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: true,
    focusOnSelect: true
  });
});


</script>