Slick Slider (Ken Wheeler) - скрыть слайдер до загрузки

в настоящее время я использую функцию слайдера Slick (Ken Wheeler). В настоящее время он загружается в нижний колонтитул только с двумя переменными.

        $('.slickSlider').slick({
              dots: true,
              fade: true
        });

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

спасибо заранее.

7
css jquery jquery-plugins slick.js slider

5 ответов

редактировать

Если это просто вопрос ожидания, пока документ не будет загружен и готов до выполнения вашего сценария, то будет работать следующее:

$(function() {
    $('.slickSlider').slick({
        dots: true,
        fade: true
    });

    $('.slickSlider').show();
});

CSS следующим образом:

.slickSlider {
    display: none;
}

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

13
.slider { display: none; }
.slider.slick-initialized { display: block; }

Это самый скудный самый подлый способ.

8

поместите класс на элемент слайдера и установите его для отображения:нет. В css добавьте 

.slick-initialized{ 
    display: block 
}

еще лучшим способом было бы добавить непрозрачность: 0 в класс элемента слайдера, а затем добавить

.slick-initialized{
    opacity:1;
    transition:opacity .3s ease-out;
}

для вашего css.

2

Я не хочу использовать ни .show(), ни .slick-initialized потому что это зависит от 3D-партийного скрипта, который можно изменить. Я заметил, что мой исходный код выглядит так:

<div id="main-slider-whatever">
    <div>
        <a href="">
            <img src="1.jgp />
        </a>
    </div>
    <div>
        <a href="">
            <img src="2.jgp />
        </a>
    </div>
    ...
</div>

но Слик создает много оберток вокруг изображений, поэтому я добавил в свой css

#main-slider-whatever>div>a>img {
    display: none;
}

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

1

почему бы вам не использовать документ.готовая функция:

$(document).ready(function(){
   $('.slickSlider').slick({
        dots: true,
        fade: true
    });

    $('.slickSlider').show();
});

коротко и просто!

0