Question

运行滑块时，不显示初始图像。只有在我点击“下一步”按钮后，滑块才会开始起作用。

链接到问题：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

在初次访问时对我工作正常，然后问题发生在下次访问。我怀疑是缓存错误？

Answer 2

在历史记录选项卡可见后，您需要手动刷新Slick插件的位置。将其添加到您的javascript：

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

Working Plunker

Answer 3

在我的项目slick('setPosition')中不起作用，但是上面带有slick('refresh')的代码起作用了，所以我使用了：
$('.main-slick').slick('refresh');

滑动滑块问题：初始加载时图像未显示

3 个答案: