滑动滑块问题：在垂直列中显示缩略图答案

【问题标题】：Slick slider issue: displaying thumbnails in vertical columns滑动滑块问题：在垂直列中显示缩略图
【发布时间】：2015-11-13 10:23:45
【问题描述】：

我正在使用 Slick 滑块并尝试显示如下图所示的缩略图（每行 2 张图像）。我使用了 'rows: 10' 和 'slidesPerRow:2' 函数，结果很好。

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

链接到网站：http://zaaroinfotechsolutions.com/zaarodemo/longbeach/corporate/#history（点击“历史”标签并一直向下滚动

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



    });

【问题讨论】：

标签： javascript html css slider slick.js

【解决方案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。

【讨论】：