javascript 滑动滑块问题:在垂直列中显示缩略图

fzsnzjdm  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(148)

我正在使用光滑的滑块,并试图显示缩略图,如下图所示(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


    });
fwzugrvs

fwzugrvs1#

documentation for Slick允许您在Bootstrap选项卡可见后手动刷新所需的定位。
只需将此添加到您的Javascript

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

这是一个**Working Plunker**。

相关问题