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

确保初始化之前华而不实的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 2

问题是华而不实的滑块初始化之前您可能会看到所有幻灯片，因为标记仅仅是一个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 3

Slick将类'slick-initialized'添加到您称之为'光滑'的包装器上。

初始加载时，除第一个以外的所有载玻片设置为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

我有这样的代码：

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

我知道这是一个老问题，但在类似的工作对我来说情况，当问题是所有的幻灯片都立即显示出来，这看起来很可怕和令人毛骨悚然。

求解是纯粹的CSS。

首先，您需要添加CSS到你的光滑滑块包装：滑块初始化

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

后，华而不实的增加.slick初始化类的wrapeper。您可以使用它来添加：

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

希望这可以帮助那些在这个问题上遇到的人像我一样绊倒。

Answer 6

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

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