Slick.js:隐藏滑块,直到图像加载完毕

Question

使用Slick.js,如何在载入图像或至少加载第一张图像之前隐藏幻灯片？我尝试使用init但无法使其工作.控制台也没有输出任何内容.

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

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

我也尝试过window load,但这也没有解决.

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

http://jsfiddle.net/q5r9ertw/

Answer 1

我知道这是一个老问题,但是在类似的情况下这对我有用,当问题是所有幻灯片都立刻显示出来时,这看起来很可怕而且很神奇.

解决方案是纯CSS.

首先,将CSS添加到光滑的滑块包装器中:

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

滑块初始化后,浮动将.slick-initialized类添加到wrapeper.您可以使用此添加:

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

希望这可以帮助那些偶然发现这个问题的人.

Answer 2

确保init在初始化光滑之前绑定事件.

示例: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将类“ slick-initialized”添加到调用“ slick”的包装器中。

将除第一个以外的所有幻灯片设置为display:none初始加载，然后将滑块置于正确的高度，并且在平滑加载时不跳跃。初始化slick后，您希望它们全部恢复到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;
}