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

一旦光滑初始化，它會將光滑初始化的類添加到包裝中，這會使其可見性恢復。