Question

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

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

Answer 1

您的整个代码是正确的，您只需更改代码中的一行。

$(document).ready(function () {
    $('#fullpage').fullpage({
        sectionsColor: ['#1bbc9b', '#4BBFC3'],
        loopBottom: true,
        afterRender: function () {
            setInterval(function () {
                fullpage_api.moveSlideRight();
            }, 1000);
        }
    });
});

更改$.fn.fullpage.moveSlideRight(); 到fullpage_api.moveSlideRight();

Answer 2

我回答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。

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

2 个答案: