滑動滑塊問題：在垂直列中顯示縮略圖

我正在使用滑動滑塊，並試圖顯示如下圖所示的縮略圖（每行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 



    });

來源

2015-11-13 Edmund Chan

documentation for Slick允許您在Bootstrap選項卡可見後手動刷新所需的定位。

只需添加到您的的Javascript：

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

這裏是一個Working Plunker。

來源

2015-11-13 18:55:43 adriancarriger

滑動滑塊問題：在垂直列中顯示縮略圖

回答

相關問題