CODEWITHSUNDEEP
javascripthtmlcsswordpressslick.js
Edmund Chan
Edmund Chan

Reputation: 75

Slick slider issue: Image not showing on initial load

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)

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});
});

Upvotes: 4

Views: 8015

Answers (3)

PouriaDiesel
PouriaDiesel

Reputation: 735

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

Upvotes: 0

adriancarriger
adriancarriger

Reputation: 3000

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

Upvotes: 3

Mark Mo
Mark Mo

Reputation: 55

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

Upvotes: 0

Related Questions