Custom Post type slider with thumbnail navigation

Question

I am trying to make a slider for a custom post type with quite a few custom fields.

Ive got the query and fields displaying fine.

But now to get it into a slider

Getting each post in the loop into a simple Jquery slider is fine, but the client wants the featured image of each post as the navigation.

I have tried quite a few things and feel I have now done a complete circle.

The slider I am using works like this (note not full code as the full query is very long and indepth due to custom fields etc)

<div class="row">
<div class="large-7 medium-8 columns">

<div id="slider">
$the_query = new WP_Query( array(
    'post_type' => 'cpt',
    'tax_query' => array(
        array (
            'taxonomy' => 'customtax',
            'field' => 'slug',
            'terms' => 'mytax',
        )
    ),
) );

while ( $the_query->have_posts() ) :
    $the_query->the_post();
  ?>
<figure> 
<img src="post thumbnail url" alt="One">
<figcaption>
Post  content, title, custom fields etc 
</figcaption>
</figure>
<?php 
endwhile;
wp_reset_postdata();
?>
</div>
        <!-- THUMBNAILS -->
            <div class="slider-nav-thumbnails">
                <div><img src="http://placehold.it/1200x600&text=one" alt="One">
                </div>
                <div><img src="http://placehold.it/1200x600&text=two" alt="Two">
                </div>
                <div><img src="http://placehold.it/1200x600&text=three" alt="Three">
                </div>
                <div><img src="http://placehold.it/1200x600&text=four" alt="Four">
                </div>
                <div><img src="http://placehold.it/1200x600&text=five" alt="Five">
                </div>
            </div>

    </div>
</div>

JS is

 $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: false,
    asNavFor: '.slider-nav-thumbnails',
 });

 $('.slider-nav-thumbnails').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.slider',
    dots: true,
    focusOnSelect: true
 });

 // Remove active class from all thumbnail slides
 $('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');

 // Set active class to first thumbnail slides
 $('.slider-nav-thumbnails .slick-slide').eq(0).addClass('slick-active');

 // On before slide change match active thumbnail to current slide
 $('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    var mySlideNumber = nextSlide;
    $('.slider-nav-thumbnails .slick-slide').removeClass('slick-active');
    $('.slider-nav-thumbnails .slick-slide').eq(mySlideNumber).addClass('slick-active');
});

Can be seen here https://codepen.io/Chazlie/pen/PoYMrQy

I was thinking something like

<img src="post thumbnail url" alt="the_title"> in the <figure>

and then for the thumbnail

<div><img src="post thumbnail url" alt="the_title"> </div>

But this would not work as it would be outside the loop

Do I do another wordpress query, though it would be the same one (I feel this is not the way to go)? or Do I use Jquery to clone? But then how would I get unique class names in order to give it functionality ?

How do I go about getting the post featured image to be the sliders navigation thumbnail?

Answer 1

Follow this flow: Define an empty array $nav_img = array(); outside the loop.

Inside the loop while you fetch the featured image, push the URL to the array too like this $nav_img[]='your_image_here' ;

Then inside <div class="slider-nav-thumbnails"></div> you can simply do a for each loop to set the images as thumb.

UPDATE:

Here I added example with your existing code.

<div class="row">
    <div class="large-7 medium-8 columns">
        <div id="slider">

        <?php
        $the_query = new WP_Query( array(
            'post_type' => 'cpt',
            'tax_query' => array(
                array (
                    'taxonomy' => 'customtax',
                    'field' => 'slug',
                    'terms' => 'mytax',
                )
            ),
        ) );

        $nav_imgs = array();

        while ( $the_query->have_posts() ) :
            $the_query->the_post();
            $nav_imgs[] = get_the_post_thumbnail_url(get_the_ID(),'thumbnail'); 
          ?>
        <figure> 
            <img src="post thumbnail url" alt="One">
            <figcaption>Post  content, title, custom fields etc</figcaption>
        </figure>
        <?php 
        endwhile;
        wp_reset_postdata();
        ?>
        </div>
        <!-- THUMBNAILS -->
        <div class="slider-nav-thumbnails">
            <?php 
                foreach($nav_imgs as $nav_thumb) {
                   echo '<div><img src="'.$nav_thumb. '"></div>';
                }
             ?>
        </div>
    </div>
</div>