滑动滑块问题：在垂直列

Question

我正在使用Slick滑块并尝试显示缩略图，如下图所示（每行2张图片）。我使用了＆＃39;行：10＆＃39;和＆＃39; slidesPerRow：2＆＃39;功能很好。

但是，当我点击缩略图时，主图像不会显示相应的缩略图图像。相反，它会被导航回第一个缩略图。

网站链接：http://zaaroinfotechsolutions.com/zaarodemo/longbeach/corporate/#history（点击＆＃39;历史记录＆＃39;标签并向下滚动

HTML      

        <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



    });

Answer 1

documentation for Slick允许您手动刷新Bootstrap选项卡可见后所需的位置。

只需将其添加到 Javascript ：

即可

$(document).ready(function () {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('.main-slick').slick('setPosition');
  });
});

这是 Working Plunker 。