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

尝试在滑块中使用 display none <div class="slider" style="display:none;"> 然后在页面准备好时显示它 $('.slider').css("display", "block"); 然后运行幻灯片 js 代码。

示例代码：

$(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/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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 2

试试下面的代码。

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

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

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

Answer 4

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

Answer 5

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

解决方法是纯 CSS。

首先，将 CSS 添加到光滑的滑块包装器中：

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

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

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

希望这可以帮助像我一样偶然发现这个问题的人。

Answer 6

在你的轮播包装器上默认设置visibility: hidden，并添加.slick-initialized { visibility: visible; }。

一旦 slick 被初始化，它会将 slick-initialized 类添加到包装器中，这将恢复其可见性。

Answer 7

我有这个代码：

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

问题在于，在 slick 滑块初始化之前，您可能会看到所有幻灯片，因为标记只是一个 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 9

确保在初始化 slick 之前绑定 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
        });