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="https://wordpress.stackexchange.com/questions/349647/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>