光滑的滑块轮播在页面加载之前开始

Question

修改我的问题，当然希望有人能提供帮助。我设置了光滑的滑块。我还使用 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>

Answer 1

尝试在 jquery 的 load 函数中添加您的脚本。这个回调函数只有在 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>