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添加到光滑的滑块包装器中：

pd.read_clipboard(...,names = [ "RANK", "cHANNEL", "Ratings"])

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

df.columns =["RANK", "cHANNEL", "Ratings"]

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

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，并使滑块处于正确的高度，而不会在光滑负载上跳跃。初始化光滑时，您希望它们全部返回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

问题是，在初始化光滑滑块之前，您可能会看到所有幻灯片，因为标记只是一个div列表。我认为在加载页面时隐藏滑块然后淡化它看起来不是很平滑。我会尝试这样做：

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

其中高度应设置为图像的高度，然后

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

这样做的好处是只有在初始化滑块时才会出现点和箭头。

Answer 5

尝试下面的代码。

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

注意：您需要向滑块中的每张幻灯片添加slide类

Codepen演示：https://codepen.io/rohitutekar/pen/GRKPpOE

Answer 6

我有这段代码：

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

构建我的光滑滑块

        <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 7

默认情况下在您的轮播包装上设置visibility: hidden，然后添加.slick-initialized { visibility: visible; }。

初始化光滑后，它会将光滑初始化的类添加到包装器中，这将使其可见性恢复。

Answer 8

这些都没有给我所需的结果，即以不干扰网站外观的方式显示滑块。我终于用这个通用代码弄清楚了。如果有人在寻找解决方案，请尝试此操作。

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

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

8 个答案: