Slick slider issue: Image not showing on initial load

1 Views

When I run the slider, the initial image is not being displayed. Only after I click on the ‘next’ button does the slider start to function.

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

Read More

Here is my code:
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});
});
Post Views: 1

Related posts

3 comments

  1. You need to manually refresh the positioning of the Slick plugin after the history tab is visible. Add this to your javascript:

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

    Working Plunker

  2. Worked fine for me on the initial visit, then the problem occurred next visit. I suspect a cache error?

  3. in my project slick('setPosition') didn’t worked but the above code with slick('refresh') worked so I used:
    $('.main-slick').slick('refresh');

Comments are closed.