Slick.js: скрыть ползунок до загрузки изображений

Используя 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/

Ответ 1

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

Решением является чистый CSS.

Во-первых, вы добавляете CSS в свою слайдерную оболочку:

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

После того, как слайдер инициализирован, slick добавляет класс .slick-initialized к wrapeper. Вы можете использовать это, чтобы добавить:

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

Надеюсь, что это поможет кому-то, кто наткнулся на этот вопрос, как и я.

Ответ 2

Обязательно привяжите событие 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
        });

Ответ 3

Slick добавляет класс '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;
}

Ответ 4

Проблема заключается в том, что до того, как начался слайдер слайдера, вы можете увидеть все слайды, так как разметка - это просто список 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
    });

Это также способствует тому, что точки и стрелки появляются только при инициализации слайдера.

Ответ 5

Ничто из этого не дало мне требуемого результата, т.е. показ слайдера таким образом, чтобы не нарушать внешний вид веб-сайта. Я наконец понял это сам с этим универсальным кодом. Если кто-то ищет решение, попробуйте это.

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

Ответ 6

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

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

Ответ 7

Установите visibility: hidden в свою оболочку карусели по умолчанию и добавьте .slick-initialized { visibility: visible; }.

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

Ответ 8

Попробуйте код ниже.

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

Примечание. Вам нужно добавить класс slide к каждому слайду в слайдере

Демонстрация Codepen: https://codepen.io/rohitutekar/pen/GRKPpOE