【发布时间】:2015-07-07 11:07:32
【问题描述】:
我正在使用fullPage.js - 我不确定它是被破坏了还是仅仅导致了一些基本上破坏了所有功能的 jQuery 错误。
我正在尝试根据 var numberSlides 的值动态添加用于在幻灯片之间导航的导航箭头。因此,在加载任何幻灯片时,我想对照 var numberSlides 检查幻灯片(例如 #portfolio-slide-1)。
如果numberSlides = 2 和我在幻灯片1 上,则应显示右侧箭头。
如果我在幻灯片 2 和 numberSlides = 2 上,那么我已经到达幻灯片的末尾,因此不需要右手箭头。
为了做到这一点,我试图将我的函数挂钩到回调afterSlideLoad(),link to documentation here
这是我当前的代码:
$.fn.fullpage.moveSlideRight();
if(numberSlides > 1){
console.log("here1"); // this logs correctly
checkCreateArrows(numberSlides);
}
function checkCreateArrows(numberSlides){
console.log("here2"); // logs correctly
$('#fullpage').fullpage({
afterSlideLoad: function(slideIndex){
// this is where is all goes wrong
if(slideIndex == 1){
console.log("First slide loaded"); // never logs
if(slideIndex < numberSlides){
console.log('There is stll another slide'); // never logs
// so create the arrow
}
}
}
});
}
所以从上面你可以看到checkCreateArrows() 正在工作,因为here2 记录。
但是,一旦它到达.fullpage 函数,整个事情就会崩溃。没有错误,但是定义所有部分高度的整页功能崩溃了,整页添加的所有 CSS 不再起作用。我不知道发生了什么。并且幻灯片无法正确导航。
那我做错了什么?
我希望我错误地使用了afterSlideLoad,它会导致 jQuery 在它中断之后?
我不知道如何调试它。我的代码看起来有问题吗?
【问题讨论】:
-
在jsfiddle在线复制它。
标签: javascript jquery fullpage.js