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/

- J82

Answer 1

我知道这是一个老问题，但在类似情况下，这对我很有效，当问题是所有幻灯片一次显示，看起来很糟糕和跳动。

解决方法纯粹是CSS。

首先，您需要将CSS添加到您的Slick滑块包装器中：

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

滑动条初始化后，Slick会将.slick-initialized类添加到包装器中。您可以使用此类来添加：

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

希望这能帮助到像我一样偶然遇到这个问题的人。

- Oksana Romaniv

---

工作得很好，但是你的可见性规则中有一个拼写错误 :)。 - d1ch0t0my

简洁明了，这应该是答案。 - Timtim

这个是最好的选择，应该被接受作为答案！ - Meules

Answer 2

在初始化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
        });

- Blaine

---

在这个代码片段中，你是否注意到初始渲染不正确，只有当你点击按钮后才能正常工作？我们该如何解决这个问题？ - N.K

Answer 3

Slick会在你调用'slick'的包装器中添加类名为'slick-initialized'。

在初始加载时，将除第一个幻灯片以外的所有幻灯片设置为display:none，这样可以使幻灯片以正确的高度显示，在slick加载时不会跳动。当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;
} 

- Jarvis Johnson

---

它在我的情况下不起作用。图像正在加载（从顶部到底部出现在屏幕上），但.slick-initialized类已经设置。 - Stanley Shauro

它对我起作用了。图片加载在HTML的顶部附近，Slick直到</body>标签之前才被加载和调用。 - Bob Brown

{时间流逝} 好的... 对我来说它只是“几乎”工作。有时一切都很好，有时不行。经过一定量的非常普通的葡萄酒后，我意识到我的Slick调用位于jQuery $( document ).ready内部，该函数在DOM准备就绪时触发。它真的需要在document.addEventListener("DOMContentLoaded"内部，这样Slick才不会在图片加载之前启动。 - Bob Brown

仍然存在一个问题，即响应式图片会导致布局渲染问题。可以在这里讨论解决方案。 - Bob Brown

Answer 4

请尝试下面的代码。

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

注意：需要为滑块中的每个幻灯片添加slide类。

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

- Rohit Utekar

Answer 5

问题在于，在slick slider初始化之前，由于标记只是一个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
    });

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

- Adam

Answer 6

这些都没有给我所需的结果，即以不影响网站外观的方式显示滑块。最终，我自己想出了这个通用代码。如果有人正在寻找解决方案，请尝试此方法。

原始答案：最初的回答

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

- Muhammad Shehroz Sajjad

---

这将适用于单幅幻灯片滑块。对于多幅幻灯片，您需要进行修改。 - Muhammad Shehroz Sajjad

Answer 7

我有这段代码：

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

构建我的Slick轮播器

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

- Marina Lebedeva

Answer 8

只需将“slick-slide”类添加到每个幻灯片即可。

- Lekhraj

Answer 9

尝试在您的滑块中使用 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>

- Simple Test

Answer 10

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

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

- Mahdi Afzal

---

对我没用。Slick 在幻灯片正确排序之前添加了 .slick-initialized 类。 - Vadzim