fullpage.js 滑块不工作

Question

我有一个学校项目的截止日期快到了，但我遇到了问题。在我将 ScrollBar 设置为 true 后，我的 fullpage.js 水平滑块停止工作。

如果我将其设置回 false，它会起作用，但我希望滚动条在那里。网站上带有滚动条的示例完美运行。

http://alvarotrigo.com/fullPage/examples/normalScroll.html

我这辈子都弄不明白为什么我的不再工作了。我觉得我缺少一个命令，但我仍然是 jQuery.

的初学者

如果可以请帮忙:)

非常感谢。

我的站点地址是：http://cultureboard.noahalexfarr.com/#firstPage

下面是我的HTML

<!DOCTYPE html>
<html>
<head>
<title>Items of my Life</title>
    <meta charset="utf-8">

    <link rel='shortcut icon' href='favicon.ico' type='image/x-icon'> 


    <link rel="stylesheet" type="text/css" href="css/style.css" />

    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
    <script src="js/jquery.easings.min.js"></script>


    <!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
    <script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>

    <script type="text/javascript" src="js/jquery.fullPage.js"></script>

    <script src="http://use.edgefonts.net/arizonia:n4:all.js"></script> 

    <script>

        function parallax(){
            var prlx_lyr_1 = document.getElementById('prlx_lyr_1');
            var prlx_lyr_2 = document.getElementById('prlx_lyr_2');
            var prlx_lyr_3 = document.getElementById('prlx_lyr_3');
            var prlx_lyr_4 = document.getElementById('prlx_lyr_4');
            var prlx_lyr_5 = document.getElementById('prlx_lyr_5');
            var prlx_lyr_6 = document.getElementById('prlx_lyr_6');
            prlx_lyr_1.style.top = (window.pageYOffset / 3)+'px';
            prlx_lyr_2.style.top = -(window.pageYOffset / 4)+'px';
            prlx_lyr_3.style.top = (window.pageYOffset / 6)+'px';
            prlx_lyr_4.style.top = -(window.pageYOffset / 8)+'px';
            prlx_lyr_5.style.top = -(window.pageYOffset / 12)+'px';
            prlx_lyr_6.style.top = (window.pageYOffset / 3)+'px';
        }

        window.addEventListener("scroll", parallax, false);

    </script>

    <script>

            $(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#1B2126', '#394D59', '#3E768C', '#41A8BF', '#9BEAF2'],
        css3: true,
        slidesNavigation: true,
        slidesNavPosition: 'bottom',
        scrollingSpeed: 2000,
        autoScrolling: true,
        fitToSection: true,
        scrollBar: true,
        easing: 'easeInOutCubic',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,
        controlArrows: true,
        verticalCentered: true,
        resize : false,
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsive: 0,
        navigation: true,
        anchors: ['firstPage', 'secondPage', 'thirdPage' , 'fourthPage' , 'fifthPage'],
        navigationPosition: 'right',
        navigationTooltips: ['First page', 'Second page', 'Third page' , 'Fourth page', 'Fifth page'],
        slidesNavigation: true,
        slidesNavPosition: 'bottom'

    });
});

    </script>

</head>

<body>


    <div id="fullpage">

        <div id="prlx_lyr_1"></div>
        <div id="prlx_lyr_2"></div>
        <div id="prlx_lyr_3"></div>
        <div id="prlx_lyr_4"></div>
        <div id="prlx_lyr_5"></div>
        <div id="prlx_lyr_6"></div>

        <div class="section" id="section0">

            <h1>Welcome to my world</h1>

            <h3>The story of the items that define me</h3>

        </div>

        <div class="section" id="section1">

            <h2>My goal</h2>

            <p>When I set out to create my culture board. I wanted to choose the items that best represented me as a whole.</p>

            <p>I choose objects that fell into 4 categories and arranged them accordingly:</p>

            <ul id="list">
                <li>Hobbies/Interests</li>
                <li>Snacks</li>
                <li>Work</li>
                <li>Soccer</li>
            </ul>

            <p>I played around with a number of different patterns before settling on my final arrangement. </p>

            <p>My creative process is labeled below:</p>

        </div>


            <div class="section" id="section2">

                <div class="slide" data-anchor="slide1"> 
                <h2>Overview</h2>
                    <img src="images/slide1.jpg" alt="set up">
                </div>

                <div class="slide" data-anchor="slide2">  
                <h2>An earlier configuration</h2>
                    <img src="images/slide2.jpg" alt="close up">
                </div>

                <div class="slide" data-anchor="slide3">  
                <h2>Coins from various countries</h2>
                    <img src="images/slide3.jpg" alt="coins">
                </div>

                <div class="slide" data-anchor="slide4">  
                <h2>Clearly I love Flippy Floppies</h2>
                    <img src="images/slide4.jpg" alt="feet">
                </div>

                <div class="slide" data-anchor="slide5">  
                <h2>Soccer helps me think</h2>
                    <img src="images/slide5.jpg" alt="soccer face">
                </div>

            </div>

        <div class="section" id="section3">
            <h2>The final step</h2>

            <p>After my culture board was complete I took it into Adobe After Effects to add motion.</p>

            <p>In addition I keyed out my Ipad screen and put a video of me crushing Dortmund as Arsenal!</p>
            <p>Finally, I recorded a voice over in audition to finish it off!</p>

            <img class="edit" src="images/final1.jpg" alt="feet">

        </div>

        <div class="section" id="section4">

            <h2>What it all adds up to</h2>

            <video poster="images/knolling.jpg" controls>

                <source src="videos/knollingvideo.mp4" type='video/mp4'/>
                <source src="videos/knollingvideo.webm" type='video/webm'/>

            </video>
        </div>
    </div>

</body>

</html>

Answer 1

示例的第三页写着：

Just use autoScrolling:false

我会试试这个。

fullpage.js 滑块不工作

fullpage.js slider not working

jquery

slider

fullpage.js