0

我有一个显示多个 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();
    });
});
4

1 回答 1

0

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 是否有pause function（如引导滑块），但您可以找到，如果您不在活动部分，请暂停滑块。

希望我的回答能帮助您了解您可以做什么。这是一个小提琴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)

于 2016-02-25T09:15:30.270 回答