我的幻灯片导航不是apear？ （Fullpage.js） [英] My slide navigation doesn't apear? (Fullpage.js)

问题描述

我正在使用fullpage.js库通过以下教程视频构建我的整页页面。

整页视图很好。但在过程中，我的幻灯片导航没有出现并且导航栏上的链接无法将页面指向该部分。



i假设我链接的脚本和css文件不正确。但我是不确定。

I'm building my fullpage page using fullpage.js library by following some tutorial videos.
The fullpage view is fine.but In the middle of the process,my slide navigation doesn't appear and the link on the navbar can't direct the page to the section that.

i assume the scripts and css files that i link is not correct.But i'm not sure.

<script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/fullPage.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <link rel="stylesheet" href="css/fullPage.min.css">
    <link rel="stylesheet" href="css/jquery.fullPage.css">

<div id="navbar">
       <a href="#page1">Page 1</a>
       <a href="#page2">Page 2</a>
       <a href="#page3/slide1">Page 3</a>
       <a href="#page3/slide2">Page 3-2</a>
       <a href="#page3/slide3">Page 3-3</a>
       <a href="#page4">Page 4</a>
   </div>
   <div id="container">
       <section  data-anchor="page2">
           <h1>Galih Indra</h1>
           <p>Web Developer</p>
       </section>
       <section  data-anchor="page2">
           <h1>About</h1>
       </section>
       <section  data-anchor="page3">
           <div class="slide"  data-anchor="slide1"><img src="https://source.unsplash.com/random"   /></div>
           <div class="slide"  data-anchor="slide2"><img src="https://source.unsplash.com/random"   /></div>
           <div class="slide"  data-anchor="slide3"><img src="https://source.unsplash.com/random"   /></div>
       </section>
       <section>
           <h1>Experiments</h1>
       </section>
   </div>
   <script>
       $(document).ready(function () {
           $('#container').fullpage({
               //options here
               autoScrolling: true,
               scrollHorizontally: true,
               scrollingSpeed: 300,
        controlArrows: false
           });

           //methods
           $.fn.fullpage.setAllowScrolling(false);
       });

我尝试过：



有人可以帮我查找错误吗？

What I have tried:

Can someone help me to find the error?

推荐答案

（文件）.ready（function（）{

(document).ready(function () {

（'＃container'）。fullpage（{
//这里的选项
autoScrolling：true，
scrollHorizo​​ntally：true，
scrollingSpeed：300，
controlArrows：false
}）;

//方法

('#container').fullpage({ //options here autoScrolling: true, scrollHorizontally: true, scrollingSpeed: 300, controlArrows: false }); //methods

.fn.fullpage.setAllowScrolling（false）;
}）;

.fn.fullpage.setAllowScrolling(false); });

我尝试了什么：



有人可以帮我查找错误吗？

What I have tried:

Can someone help me to find the error?

这篇关于我的幻灯片导航不是apear？ （Fullpage.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！