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

我有一个页面可以显示多个Royalslider幻灯片，每个幻灯片的宽度和高度均为100％。当前，所有幻灯片显示都在页面加载时初始化，这意味着我只看到第一个滑块淡入淡出（应该全部淡入，但第一个是唯一可以看到此效果的滑块）。

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

任何帮助将不胜感激！

的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();
    });
});

最佳答案

scrollify有一个回调after，在将新部分滚动到后会触发该回调。参数包括节的索引和所有节元素的数组（来自Documentation）。
这样就可以检查索引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是否具有pause function（如bootstrap滑块），但是您可以找到它，如果您不在活动部分，请暂停该滑块。

希望我的回答对您有所帮助。
这是一个小提琴https://jsfiddle.net/urhfrw44/4/
但我不能使用RoyalSlider cz不是免费的）））

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

如您所见，您有带有div类的滑块royalslider + number，因此可以将它们设置为royalslider0 = first section starts from 0并在$('.royalslider'+index)以上的代码中使用