Slick.js: Ẩn thanh trượt cho đến khi hình ảnh đã tải

Question

Sử dụng Slick.js, cách ẩn một trang trình bày cho đến khi hình ảnh đã tải hoặc ít nhất hình ảnh đầu tiên đã tải? Tôi đã thử sử dụng init nhưng không thể làm cho nó hoạt động. Không có gì được xuất ra bàn điều khiển.

var $slider = $('.slider').slick({ 
    fade: true, 
    focusOnSelect: true, 
    lazyLoad: 'ondemand', 
    speed: 1000 
}); 

$('.slider').on('init', function(slick) { 
    console.log('fired!'); 
    $('.slider').fadeIn(3000); 
}); 

Tôi cũng đã thử window load, nhưng điều đó cũng không khắc phục được.

$(window).load(function() { 
    $('.slider').fadeIn(3000); 
}); 

http://jsfiddle.net/q5r9ertw/

Answer 1

Hãy chắc chắn để ràng buộc sự kiện init trước khi khởi trơn.

Ví dụ: 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

Vấn đề là trước khi trượt trơn được khởi tạo, bạn có thể xem tất cả các slide của bạn, kể từ khi đánh dấu đơn giản là một danh sách div. Tôi nghĩ rằng ẩn thanh trượt và sau đó mờ dần nó trông không rất trơn tru khi trang được tải. Tôi sẽ cố gắng này để thay thế:

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

nơi chiều cao nên được thiết lập để chiều cao của hình ảnh của bạn và sau đó

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

này cũng có những lợi ích mà các dấu chấm và mũi tên chỉ xuất hiện khi trượt được khởi tạo .

Answer 3

Slick thêm lớp 'slick-initialized' vào trình bao bọc mà bạn gọi là 'slick'.

Đặt tất cả các trang trình bày ngoại trừ trang trình bày đầu tiên thành display:none khi tải ban đầu và bạn nhận được thanh trượt ở độ cao chính xác, không nhảy khi tải nhẹ. Khi slick được khởi tạo, bạn muốn tất cả chúng trở lại 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

tôi có mã này:

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

Cơ cấu trượt trơn của tôi

 <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

Tôi biết đó là một câu hỏi cũ, nhưng điều này đã làm việc cho tôi trong một tương tự tình hình, khi vấn đề là tất cả các slide được hiển thị cùng một lúc và điều này trông khủng khiếp và lộng lẫy.

Giải quyết là CSS thuần túy.

Trước tiên, bạn thêm CSS để wrapper trượt trơn của bạn:

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

Sau khi trượt được khởi tạo, slick thêm .slick-khởi tạo lớp cho wrapeper. Bạn có thể sử dụng quyền này để thêm:

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

Hy vọng điều này sẽ giúp ai đó tình cờ gặp phải câu hỏi này như tôi đã làm.

Answer 6

Đặt visibility: hidden trên trình bao bọc băng chuyền của bạn theo mặc định và thêm .slick-initialized { visibility: visible; }.

Khi slick được khởi tạo, nó sẽ thêm lớp khởi tạo trơn tru vào trình bao bọc sẽ mang lại khả năng hiển thị trở lại.