Question

修改我的问题，肯定希望有人可以提供帮助。我有光滑的滑块设置。我还使用了Foundation Zurb“tab”功能，因此页面打开时顶部有标签可供导航。由于整个页面加载，即使人们没有查看该选项卡，并且在图像本身完全加载之前，由初始页面加载（例如滑块）触发的任何内容都会开始运行。我需要的是滑块通过幻灯片组开始自动旋转，并在完成一个循环时停在第一张幻灯片上。滑块本身正在工作 - 这是我不知道该怎么做的初始启动功能。我希望在实际滑块的函数调用中有一些方法可以做到这一点，但我只是不知道要使用哪些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>

光滑的滑块轮播在页面加载之前启动

1 个答案: