0

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?

0
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>
2
  • I'd upvote this answer if you could edit it to include the full sample code including how one could get the thumbnail URL in WordPress. And one could also just push the thumbnail HTML to the $nav_img array, and do something like this outside the loop: echo '<div>' . implode( '</div><div>', $nav_img ) . '</div>';. Btw, you should also properly format your code like using backticks and not quotes ('). – Sally CJ Oct 4 '19 at 7:23
  • 1
    @SallyCJ Thanks for pointing out. Reason behind not formatting and adding example is I was answering from mobile and there is not option to format in editor. Anyways I'll edit and add proper example. – Sabbir Hasan Oct 4 '19 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.