2015-11-13 128 views
0

我正在使用滑動滑塊,並試圖顯示如下圖所示的縮略圖(每行2個圖像)。我用'rows:10'和'slidesPerRow:2'函數,結果很好。滑動滑塊問題:在垂直列中顯示縮略圖

但是,當我點擊縮略圖時,主圖像不會顯示相應的縮略圖圖像。相反,它會導航回第一個縮略圖。

enter image description here

鏈接至網站: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 



    }); 

回答

0

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

只需添加到您的的Javascript

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

這裏是一個Working Plunker