Javascript Slick.js：隐藏滑块直到图像加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28357617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick.js: Hide slider until images have loaded
提问by J82
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 initbut couldn't get it to work. Nothing is outputted to the console, either.
使用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);
});
I also tried window load, but that didn't fix it either.
我也试过window load，但这也没有解决它。
$(window).load(function() {
$('.slider').fadeIn(3000);
});
回答by Oksana Romaniv
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.
解决方法是纯 CSS。
First, you add CSS to your slick slider wrapper:
首先，您将 CSS 添加到光滑的滑块包装器中：
.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:
滑块初始化后，slick 将 .slick-initialized 类添加到包装器。您可以使用它来添加：
.your-slider-wapper.slick-initialized {
visibility: visible;
opacity: 1;
}
Hope this helps someone who stumbles upon this question as I did.
希望这可以帮助那些像我一样偶然发现这个问题的人。
回答by Blaine
Make sure to bind the initevent before initializing slick.
确保init在初始化 slick 之前绑定事件。
Example: http://jsfiddle.net/b5d5mL7p/
示例：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
});
回答by Jarvis Johnson
Slick adds the class 'slick-initialized' to the wrapper that you call 'slick' on.
Slick 将类 'slick-initialized' 添加到您调用 'slick' 的包装器中。
Set all slides except the first to display:noneon 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.
将除第一个以外的所有幻灯片设置为display:none初始加载，您就会将滑块置于正确的高度，在光滑加载时不会跳跃。当 slick 被初始化时，你希望它们都回到display: block.
CSS
CSS
.slide img {
height: 600px;
width: auto;
}
.slide:not(:first-of-type) {
display: none;
}
.slider.slick-initialized .slide:not(:first-of-type) {
display:block;
}
回答by Adam
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:
问题是，在 slick slider 初始化之前，您可能会看到所有幻灯片，因为标记只是一个 div 列表。我认为在加载页面时隐藏滑块然后淡入淡出它看起来不是很平滑。我会试试这个：
<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.
这还有一个好处，即点和箭头仅在滑块初始化时出现。
回答by Rohit Utekar
Try below code.
试试下面的代码。
#your-slider .slide:nth-child(n+2) {
display: none;
}
#your-slider.slick-initialized .slide {
display: block;
}
Note: You need to add slideclass to each slide in your slider
注意：您需要为slide滑块中的每张幻灯片添加类
Codepen demo: https://codepen.io/rohitutekar/pen/GRKPpOE
Codepen 演示：https: //codepen.io/rohitutekar/pen/GRKPpOE
回答by Muhammad Shehroz Sajjad
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;
}
回答by Mahdi Afzal
Set visibility: hiddenon your carousel wrapper by default, and add .slick-initialized { visibility: visible; }.
设置visibility: hidden在默认情况下你的旋转木马的包装，并添加.slick-initialized { visibility: visible; }。
Once slick is initialized, it adds the slick-initialized class to the wrapper which will bring its visibility back.
一旦 slick 被初始化，它就会将 slick 初始化的类添加到包装器中，这将使其可见性恢复。
回答by Marina Lebedeva
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>
