我正在尝试为一个自定义帖子类型制作一个滑块，其中包含许多自定义字段。
我得到的查询和字段显示良好。
但现在让它进入滑块
将循环中的每一篇文章放入一个简单的Jquery滑块很好，但客户机希望将每一篇文章的特征图像作为导航。
我已经尝试了很多事情，现在觉得我已经完成了一个完整的循环。
我使用的滑块是这样工作的（请注意，不是完整的代码，因为由于自定义字段等原因，完整查询非常长且深入）
<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是
$(\'.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\');
});
可以在这里看到
https://codepen.io/Chazlie/pen/PoYMrQy 我在想
<img src="post thumbnail url" alt="the_title"> 在<figure>
然后是缩略图
<div><img src="post thumbnail url" alt="the_title"> </div>
但这不会起作用，因为它会在循环之外
我是否还要做另一个wordpress查询，尽管它会是同一个（我觉得这不是应该做的）？还是使用Jquery进行克隆？但是，我怎样才能获得唯一的类名来赋予它功能呢？
如何将帖子的特色图像作为滑块导航缩略图？
SO网友:Sabbir Hasan
遵循以下流程：定义空数组$nav_img = array(); 循环外部。
在循环内部，当您获取特征图像时，也可以像这样将URL推送到数组$nav_img[]=\'your_image_here\' ;
然后在里面<div class="slider-nav-thumbnails"></div> 您只需执行for each循环即可将图像设置为thumb。
UPDATE:
在这里，我用您现有的代码添加了示例。
<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>
