全页js幻灯片效果?

YVS*_*102 10 html css fullpage.js bootstrap-4

我正在尝试使用Fullpage.js.这是我的脚本:

<div id="fullpage" style="margin-top: 55px">
    <div class="section" id="first" style="background-color: red">Some section - Home</div>
    <div class="section" id="services" style="background-color: blue">Some section - Services</div>
    <div class="section" id="why" style="background-color: green">Some section - Why</div>
    <div class="section" id="portofolio" style="background-color: red">Some section - Portofolio</div>
    <div class="section" id="price" style="background-color: blue">Some section - Price</div>
</div>

<script type="text/javascript">
   $(document).ready(function() {

$('#fullpage').fullpage({
    menu: '#navbarNav',
    css3: true,
    scrollingSpeed: 1000
});
});
</script>
Run Code Online (Sandbox Code Playgroud)

问题是,我的HTML页面没有幻灯片效果.有解决方案吗 我在浏览器控制台中看不到任何错误.

UPDATE

还有第二个问题,当我滚动到随机部分然后我点击菜单,锚点不起作用,我的意思是它保持在我滚动的部分.

Joo*_*stS 3

您需要在脚本中定义锚点,如下所示:

$(document).ready(function() {
    $('#fullpage').fullpage({
        menu: '#navbarNav',
        css3: true,
        scrollingSpeed: 1000,
        anchors:['first, 'secondPage', 'why', 'portofolio', 'price']
    });
};
Run Code Online (Sandbox Code Playgroud)

来源: https: //github.com/alvarotrigo/fullPage.js#fullpagejs