jquery - 仅在视口(viewport)中初始化 RoyalSlider

Question

我有一个页面显示多个 Royalslider 幻灯片，每个幻灯片的宽度和高度均为 100%。目前，所有幻灯片都在页面加载时初始化，这意味着我只看到第一个 slider 淡入到位(它们都应该淡入，但第一个是唯一可见的可见效果)。

我还使用 Scrollify 捕捉到每个部分，但我不确定这是否相关，因为我认为我需要调整下面的脚本以仅在进入视口(viewport)时初始化幻灯片。

如有任何帮助，我们将不胜感激!

HTML

<section >
    <div class="slideshow royalSlider">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

<section >
    <div class="slideshow royalSlider">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

<section >
    <div class="slideshow royalSlider">
        <div class="rsContent">Slider content here</div>
    </div>              
</section>

JS

jQuery(document).ready(function($) {
    $('.slideshow').royalSlider({
        transitionType:         'move',
        randomizeSlides:        false,
        imageScaleMode:         'fill'
    });         
});

// Scrollify (snap to section)
$(function() {
    $.scrollify({
        section : "section",
        easing: "easeOutExpo",
        scrollSpeed: 1000,
        scrollbars: true,
        before:function() {},
        after:function() {}
    });

    $(".scroll-down").click(function(e) {
        e.preventDefault();
        $.scrollify.next();
    });
});

Answer 1

scrollify 有一个回调 after，它会在滚动到新部分后触发。参数包括部分的索引和所有部分元素的数组(来自文档)。所以你可以检查索引 after(index)

if(index == 'value'){
   //init slider for current section
}

除此之外，您还可以编写类似 start_slider() 的函数并使用以下参数调用:

start_slider('#div_id', options)

function start_slider(div, options){
   $(div).royalSlider(options);
}

或者检查是否已经启动

function start_slider(div, options){
    if(!$(div).hasClass('class_royal_slider')){
       $(div).royalSlider(options);
    }
}

我不确定 royalsldier 是否有暂停功能(如引导 slider )，但您可以找到，如果您不在事件部分，则暂停 slider 。

希望我的回答能帮助您了解您可以做什么。这是一把 fiddle https://jsfiddle.net/urhfrw44/4/但我不能使用 RoyalSlider cz 不是免费的)))

after:function(index) {
       //if ($('.royalslider'+index).children().length > 0) {
       //       this.slider();
       //}
}

如您所见，您有 slider div 和类 royalslider + number 因此您可以将它们设为 royalslider0 = first section从 0 开始 并在上面的代码中使用 $('.royalslider'+index)