javascript - 光滑 slider 问题 : Image not showing on initial load

Question

当我运行 slider 时，未显示初始图像。只有在单击“下一步”按钮后， slider 才开始起作用。

问题链接:http://zaaroinfotechsolutions.com/zaarodemo/longbeach/corporate/ (单击历史记录选项卡并一直向下滚动)

这是我的代码: html

<div class="col-sm-9" style="padding:0px;"> <div class="main-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_main = wp_get_attachment_url(get_post_thumbnail_id($post->ID));

                                ?>
          <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));          ?>" class="img-responsive mainimage" id="mainimage">
<?php endwhile; ?> </div> </div>

Javascript

$(document).ready(function(){ 
  $('.main-slick').slick( { infinite: false});
});

Answer 1

历史选项卡可见后，您需要手动刷新 Slick 插件的位置。将其添加到您的 JavaScript 中:

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

Working Plunker