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

Проблема заключается в том, что перед скользким слайдер инициализируется вы можете увидеть все ваши слайды, так как разметка просто список дел. Я думаю, что скрытие ползунка, а затем исчезновение выглядит не очень гладким, когда страница загружена. Я хотел бы попробовать это вместо:

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

У меня есть этот код:

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

Structure мой гладкий слайдер

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

После инициализации пятна он добавляет класс-инициализированный класс в оболочку, которая вернет его видимость.