Slick.js: Hide slider until images have loaded

Question

Using Slick.js, how does one hide the slide until the images have loaded or at least the first image has loaded? I tried using init but couldn't get it to work. Nothing is outputted to the console, either.

var $slider = $('.slider').slick({
    fade: true,
    focusOnSelect: true,
    lazyLoad: 'ondemand',
    speed: 1000
});

$('.slider').on('init', function(slick) {
    console.log('fired!');
    $('.slider').fadeIn(3000);
});

I also tried window load, but that didn't fix it either.

$(window).load(function() {
    $('.slider').fadeIn(3000);
});

http://jsfiddle.net/q5r9ertw/

Answer 1

I know it's an old question, but this worked for me in a similar situation, when the problem was that all slides were displayed at once and this looked horrible and jumpy.

The solving is pure CSS.

First, you add CSS to your slick slider wrapper:

.your-slider-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

After slider is initialized, the slick adds .slick-initialized class to the wrapeper. You can use this to add:

.your-slider-wapper.slick-initialized {
    visibility: visible;
    opacity: 1;    
}

Hope this helps someone who stumbles upon this question as I did.

Answer 2

Make sure to bind the init event before initializing slick.

Example: http://jsfiddle.net/b5d5mL7p/

var $slider = $('.slider')
        .on('init', function(slick) {
            console.log('fired!');
            $('.slider').fadeIn(3000);
        })
        .slick({
            fade: true,
            focusOnSelect: true,
            lazyLoad: 'ondemand',
            speed: 1000
        });

Answer 3

Slick adds the class 'slick-initialized' to the wrapper that you call 'slick' on.

Set all slides except the first to display:none on initial load and you get the slider at its correct height, with no jumping on slick load. When slick is initialized, you want them all back to display: block.

CSS

.slide img {
  height: 600px;
  width: auto;
}
.slide:not(:first-of-type) {
  display: none;
}
.slider.slick-initialized .slide:not(:first-of-type) {
  display:block;
} 

Answer 4

Try below code.

#your-slider .slide:nth-child(n+2) {
  display: none;
}
#your-slider.slick-initialized .slide {
  display: block;
}

Note: You need to add slide class to each slide in your slider

Codepen demo: https://codepen.io/rohitutekar/pen/GRKPpOE

Answer 5

The problem is that before slick slider is initialized you might see all your slides, since the markup is simply a div list. I think hiding the slider and then fading it looks not very smooth when the page is loaded. I would try this instead:

<style>
.slickSlider{
  height: 300px;
  overflow: hidden;
}
</style>

where the height should be set to the height of your images and then

  $('.slickSlider')
    .on('init', function(slick) {
        $('.slickSlider').css("overflow","visible");
    })
    .slick({
        fade: true,
        focusOnSelect: true,
        lazyLoad: 'ondemand',
        speed: 1000
    });

This has also the benefit that the dots and arrows only appear when slider is initialized.

Answer 6

None of this gave me required result i.e show slider in such a way which doesn't disturbs the look of website. I finally figured it out myself with this generic code. In case anyone is looking for solution do try this.

.yourslickclass > div:not(:first-child)
 {
   display: none;
 }

Answer 7

I have this code:

.slider-slick:not(.slick-initialized) .blog-slide-wrap:not(:first-child)
 { 
      display: none
 }

Structure my slick slider

        <div class="blog-slider slider-slick">
        <?php
        while ($query->have_posts()) {
            $query->the_post();
            ?>
            <div class="blog-slide-wrap">
                <img src="<?= get_the_post_thumbnail_url(get_the_ID(), 'blog-slider') ?>">
                <div class="blog-text-wrap">
                    <h2><a href="<?= get_the_permalink() ?>"><?= get_the_title() ?></a></h2>
                </div>
            </div>
            <?php
        }
        ?>
    </div>

Answer 8

Set visibility: hidden on your carousel wrapper by default, and add .slick-initialized { visibility: visible; }.

Once slick is initialized, it adds the slick-initialized class to the wrapper which will bring its visibility back.

Answer 9

Try to use display none <div class="slider" style="display:none;"> in your slider then display it when page is ready $('.slider').css("display", "block"); and then run the slide js code.

Example Code:

$(document).ready(function() {
  $('.slider').css("display", "block");
  $(".center,.opti_gallery").slick({
          dots: true,
          infinite: true,
          centerMode: false,
          slidesToShow: 2,
          slidesToScroll: 1,
          arrows:false,
        });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>

<div class="slider" style="display:none;">
   <div>
      <img src="img1.png">
   </div>
   <div>
      <img src="img2.png">
   </div>
</div>

Answer 10

just add class "slick-slide" to each slide