гладкая карусель слайдера запускается до загрузки страницы

Изменение моего вопроса и, конечно, надеюсь, что кто-то может помочь. У меня настроен плавный слайдер. Я также использую функцию «вкладки» Foundation Zurb, поэтому страница открывается с вкладками вверху для навигации. Поскольку загружается вся страница, все, что запускается этой начальной загрузкой страницы (например, слайдер), начинает работать, даже если люди не смотрят на эту вкладку, и до того, как сами изображения полностью загрузятся. Мне нужно, чтобы ползунок начал автоповорот через набор слайдов и остановился на первом слайде, когда он завершает один цикл. Сам ползунок работает - именно эту функцию начального запуска я не знаю как сделать. Я ожидаю, что есть какой-то способ сделать это в вызове функции для фактического ползунка, но я просто не знаю, какие функции javascript использовать.

Мой вызов функции прямо сейчас для ползунка выглядит следующим образом. Но когда люди нажимают на вкладку, она начинается со слайда 1, но слайд никогда не отображается, потому что он все еще пытается загрузить изображения после того, как кто-то переходит на эту страницу. Затем он открывает слайд 2 и корректно завершает просмотр оставшихся слайдов, возвращается к первому и останавливается.

<script type="text/javascript">
var item_length = $('.slide > div').length - 1;
var slider = $('.slide').slick({
autoplay: true,
autoplaySpeed: 5000,
dots: true,
infinite: false,
speed: 2000,
fade: true,
slide: 'div',
onAfterChange: function(){
//check the length of total items in .slide container
//if that number is the same with the number of the last slider
//Then pause the slider
if( item_length == slider.slickCurrentSlide() ){
//this should do the same thing -> slider.slickPause();
slider.slickSetOption("autoplay",false,false)
};
} 
});
</script>

person Community    schedule 19.04.2016    source источник
comment
Пожалуйста, предоставьте скрипку или свой код, чтобы мы могли лучше понять.   -  person Developer107    schedule 21.04.2016
comment
Поможет ли вышеперечисленное? Я также немного отредактировал свой вопрос, потому что я не думаю, что я был очень ясен.   -  person    schedule 21.04.2016


Ответы (1)


Попробуйте добавить свой скрипт внутрь load функции jquery. Эта функция обратного вызова выполняется только после того, как DOM будет готов и все ресурсы будут загружены.

<script type = "text/javascript">
$(window).load(function() {
    var item_length = $('.slide > div').length - 1;
    var slider = $('.slide').slick({
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
        infinite: false,
        speed: 2000,
        fade: true,
        slide: 'div',
        onAfterChange: function() {
            //check the length of total items in .slide container
            //if that number is the same with the number of the last slider
            //Then pause the slider
            if (item_length == slider.slickCurrentSlide()) {
                //this should do the same thing -> slider.slickPause();
                slider.slickSetOption("autoplay", false, false)
            };
        }
    });
});
</script>
person Developer107    schedule 22.04.2016
comment
Никаких изменений в поведении. Я думаю, но не знаю, как проверить, что слайдер ожидает загрузки страницы, но что-то вызывает задержку, пока вторая точка не станет активной. При нажатии на вкладку, на которой будет отображаться ползунок, видны только точки, а не изображения. Активна первая точка, затем становится активной вторая точка, и только в этот момент изображения становятся видимыми. Хотел бы я знать, как понять, что происходит во время этой задержки. Тем не менее, спасибо за эту функцию. Это гораздо лучшая структура кодирования. - person ; 26.04.2016
comment
Можно ли повторно инициализировать функцию? Если кто-то нажмет на вкладку, могу ли я захватить этот идентификатор класса и заставить его перезапустить слайды на № 1, а затем приостановить? Я просто не знаю, почему изображения не загружаются. Похоже, функция загрузки решит эту проблему. - person ; 26.04.2016
comment
да, вам нужно сначала удалить (уничтожить) плагин - $('.slide').slick('unslick');, а затем снова инициализировать слайдер. - person Developer107; 27.04.2016
comment
Благодарю вас! Я попробую это. Очень признателен за отзыв и помощь! - person ; 13.05.2016