fullpge.js - 互锁幻灯片和setallowscrolling

时间:2018-06-03 05:10:27

标签: javascript fullpage.js

我正在使用互锁幻灯片插件。我发现如果没有启用插件,我就无法停止滚动。

我想要的是第1部分幻灯片向下滑动到第2部分,但随后停止。没有向下滚动。除第2部分幻灯片1外,它应滚动到第3部分,然后转到第4部分等。

所以以下内容根本不起作用:

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);       
            if(index == 2 && slideAnchor == 'ethos'){
                        $.fn.fullpage.setAllowScrolling(false, 'down');
            }
            if(index == 2 && slideAnchor == 'citizenship'){
                        $.fn.fullpage.setAllowScrolling(false, 'down');
            }
            if(index == 2 && slideAnchor == 'partners'){
                        $.fn.fullpage.setAllowScrolling(false, 'down');
            }
            if(index == 2 && slideAnchor == 'reg-form'){
                        $.fn.fullpage.setAllowScrolling(false, 'down');
            }
}

现在这样可行,但它也会阻止第2部分滚动到第3部分。我试图过度骑行但没有运气:

    afterLoad: function(anchorLink, index){
        if(index == 1 && anchorLink == 'home'){
        $('body.fp-viewing-home').find('.fp-section').index();
            $.fn.fullpage.setAllowScrolling(true, 'all'); 
            $.fn.fullpage.setKeyboardScrolling(true, 'all');
    }       
        if(index == 2 && anchorLink == 'read-more'){
            $('body.fp-viewing-read-more').find('.fp-section').index();
            $.fn.fullpage.setAllowScrolling(false, 'down'); 
            $.fn.fullpage.setKeyboardScrolling(false, 'down');
    }   
        if(index == 2 && anchorLink == 'shopping'){
        $('body.fp-viewing-read-more-shopping').find('.fp-slide').index();
            $.fn.fullpage.setAllowScrolling(true, 'all'); 
            $.fn.fullpage.setKeyboardScrolling(true, 'all');
    }
}

全页html标记:

<!-- FullPage -->
    <div id="fullPage">
<!--FpONE-->
        <div class="section section-one" id="section1">
    <!--Slides1-1-->
            <div class="slide slide-one noselect" id="slide1-1" data-anchor="homepage">
                <div class="fp-bg"></div>
                <?php require_once'section1-1.php';?>
            </div>
    <!--Slides1-2-->
            <div class="slide slide-two noselect" id="slide1-2" data-anchor="our-ethos">
                <div class="fp-bg"></div>
                <?php require_once'section1-2.php';?>
            </div>
    <!--Slides1-3-->
            <div class="slide slide-three noselect" id="slide1-3" data-anchor="ahimsa-citizenship">
                <div class="fp-bg"></div>
                <?php require_once'section1-3.php';?>
            </div>
    <!--Slides1-4-->
            <div class="slide slide-four noselect" id="slide1-4" data-anchor="our-partners">
                <div class="fp-bg"></div>
                <?php require_once'section1-4.php';?>
            </div>
    <!--Slides1-5-->
            <div class="slide slide-four noselect" id="slide1-5" data-anchor="register">
                <div class="fp-bg"></div>
                <?php require_once'section1-5.php';?>
            </div>
        </div>
<!--FpTWO-->
        <div class="section section-one " id="section2">
    <!--Slides2-1-->
            <div class="slide slide-one noselect" id="slide2-1" data-anchor="shopping">
                <div class="fp-bg"></div>
                <?php require_once'section2-1.php';?>
            </div>
    <!--Slides2-2-->
            <div class="slide slide-two noselect" id="slide2-2" data-anchor="ethos">
                <div class="fp-bg"></div>
                <?php require_once'section2-2.php';?>
            </div>
    <!--Slides2-3-->
            <div class="slide slide-three noselect" id="slide2-3" data-anchor="citizenship">
                <div class="fp-bg"></div>
                <?php require_once'section2-3.php';?>

            </div>
    <!--Slides2-4-->
            <div class="slide slide-four noselect" id="slide2-4" data-anchor="partners">
                <div class="fp-bg"></div>
                <?php require_once'section2-4.php';?>
            </div>
    <!--Slides2-5-->
           <div class="slide slide-four noselect" id="slide2-5" data-anchor="reg-form">
                <div class="fp-bg"></div>
                <?php require_once'section2-5.php';?>

            </div>
        </div>
<!--Section 3 -->
        <div class="section section-two noselect" id="section3">
            <div class="fp-bg"></div>
            <?php require_once'section3.php';?>
        </div>
<!--Section 4 -->
        <div class="section section-two noselect" id="section4">
            <div class="fp-bg"></div>
            <?php require_once'section4.php';?>
        </div>
<!--Section 5 -->
        <div class="section section-two noselect" id="section5">
            <div class="fp-bg"></div>
            <?php require_once'section5.php';?>
        </div>
<!--Section 6 -->
        <div class="section section-two noselect" id="section6">
            <div class="fp-bg"></div>
            <?php require_once'section6.php';?>
        </div>
</div>

0 个答案:

没有答案