我正在使用光滑的滑块,并试图显示缩略图,如下图所示(2图像一行)。10“和”slidesPerRow:2“函数,结果很好。
然而,当我点击缩略图时,主图像并不显示相应的缩略图,而是导航回第一个缩略图。
网站链接:http://zaaroinfotechsolutions.com/zaarodemo/longbeach/corporate/#history(单击“历史记录”选项卡并向下滚动
超文本标记语言
<div class="sub-slick">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'slide',
'tax_query' => array(
array(
'taxonomy' => 'slide_category',
'field' => 'slug',
'terms' => 'history'
)
)
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
$feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
//if($i!=0){
?>
<div class="col-sm-6 col-xs-6">
<img src="<?php echo $feat_image; ?>" class="img-responsive thumbnail" style="height:90px;width:100%;">
</div>
<?php //} $i++;
endwhile; ?>
</div>
</div>
Javascript语言
$('.sub-slick').slick(
{
asNavFor: '.main-slick',
focusOnSelect: true,
rows: 10,
slidesPerRow: 2
});
1条答案
按热度按时间fwzugrvs1#
documentation for Slick允许您在Bootstrap选项卡可见后手动刷新所需的定位。
只需将此添加到您的Javascript:
这是一个**Working Plunker**。