我有一个页面显示多个 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();
});
});
最佳答案
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)
关于jquery - 仅在视口(viewport)中初始化 RoyalSlider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35622177/