Slick.js：隐藏滑块，直到图像加载完毕

问题描述：

使用 Slick.js ，如何隐藏幻灯片，直到图片加载或至少加载了第一张图片为止？我尝试使用 init 但无法使其正常工作。也没有输出到控制台。

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/

答

我知道这是一个老问题，但这对我有用情况，当问题是所有幻灯片一次显示，这看起来很可怕和跳跃。

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.

解决方案是纯CSS。

首先，将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;
}

滑块初始化后，浮动将.slick-initialized类添加到wrapeper 。您可以使用它来添加：

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.

Slick.js：隐藏滑块，直到图像加载完毕

相关推荐