在fullpage.js中自动播放或滚动幻灯片

时间:2018-07-23 15:09:25

标签: javascript fullpage.js

我已经阅读了许多有关想要自动滑块的文章。我已经看到了代码。我已经复制并粘贴了代码。但是,幻灯片只是坐在那里。可以使用箭头手动将其推进,但我无法使其自动前进。

为澄清起见,我不是在谈论章节,而是在谈论幻灯片。我想要的是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>

2 个答案:

答案 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。