'Slick slider issue: displaying thumbnails in vertical columns

I'm using Slick slider and am trying to display the thumbnails as shown in the image below (2 images a row). I used the 'rows: 10' and 'slidesPerRow:2' function and it turned out well.

However when I click on a thumbnail, the main image doesn't show the respective thumbnail image. Instead it gets navigated back to the 1st thumbnail.

enter image description here

Link to website: http://zaaroinfotechsolutions.com/zaarodemo/longbeach/corporate/#history (click on the 'history' tab and scroll all the way down

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



    });
javascripthtmlcsssliderslick.js


Solution 1:[1]

The documentation for Slick allows you to manually refresh the positioning which is needed after your Bootstrap tab is visible.

Just add this to your Javascript:

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

Here is a Working Plunker.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 adriancarriger

Related Questions