我已经阅读了许多有关想要自动滑块的文章。我已经看到了代码。我已经复制并粘贴了代码。但是,幻灯片只是坐在那里。可以使用箭头手动将其推进,但我无法使其自动前进。
为澄清起见,我不是在谈论章节,而是在谈论幻灯片。我想要的是section1具有三或四个自动滚动的幻灯片,就像许多第三方滑块一样。然后,我希望section2和section3是没有幻灯片的常规页面。
我曾尝试将第三方滑块集成到整页中,但是当滑块前进到下一张幻灯片时,它也会触发整页前进到下一部分。必须有一些重复的代码导致此情况。我尝试了三种不同的滑块,它们都有这种行为。另外,我还是不想使用第三方滑块。
顺便说一句,我开始使用的模板是'active-slide.html'
感谢您的帮助。
代码:
<script>
$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function () {
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 2500);
}
});
});
</script>
答案 0 :(得分:2)
您的整个代码是正确的,您只需更改代码中的一行。
$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function () {
setInterval(function () {
fullpage_api.moveSlideRight();
}, 1000);
}
});
});
更改$.fn.fullpage.moveSlideRight();
到fullpage_api.moveSlideRight();
答案 1 :(得分:0)
我回答time ago on the github forurm:
$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3'],
loopBottom: true,
afterRender: function () {
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 1000);
}
});
});
但是,如果您不想使用jQuery,我建议您使用fullPage.js 3 API。