jquery - CodyHouse 的图像比较 slider 与 fullPage.js 有冲突

Question

我正在使用来自 http://codyhouse.co/gem/css-jquery-image-comparison-slider/ 的图像 slider 和 fullpage.js http://alvarotrigo.com/fullPage/但是，当我将 jquery 放在标题处时， slider 不起作用，但如果我放在底部，fullPage.js 无法运行，但图像比较可以。下面是代码:

<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<!-- alternative to futura font -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />

   <!-- Resource jQuery -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script> 
<script src="js/main.js"></script>

        <!-- https://github.com/alvarotrigo/fullPage.js#usage -->
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage', '7thpage', '8thpage', '9thpage', 'lastPage'],
            continuousVertical: true,
            responsiveWidth: '400',
        });
    });
</script>

<div id="fullpage">
    <div class="section " id="section0">
        <img src="img/logo.png" />
        <div class="row">
            &nbsp;
        </div>
        <div class="row">
            &nbsp;
        </div>
        <div class="row">
            &nbsp;
        </div>
        <p><a href="#secondPage">About</a></p>
        <span><a href="#3rdPage">Age</a></span>
        <span><a href="#4thpage">Cosplay</a></span>
        <span><a href="#5thpage">Privacy</a></span>
        <span><a href="#6thpage">Romance</a></span>
        <span><a href="#7thpage">School</a></span>
        <span><a href="#8thpage">Son</a></span>
        <span><a href="#9thpage">Time</a></span>
        <span><a href="#10thpage">Vocation</a></span>
    </div>
    <div class="section" id="section1">
        <div class="container">
            <div class="row">
                <img src="img/logo.png" />
            </div>
            <div class="row">&nbsp;
            </div>
            <div class="row">

                <div class="col-xs-6 col-sm-4 justify">
                    <p>lorem ipsum</p>
                </div>
            </div>
        </div>
    </div>
    <div class="section" id="section2">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section3">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Couple</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section4">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section5">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section6">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section7">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>



<div class="section" id="section8">
        <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
</div>

<div class="section" id="section9">
         <figure class="cd-image-container">
            <img src="img/cosplay/v.jpg">

            <div class="cd-resize-img">
                <!-- the resizable image on top -->
                <img src="img/cosplay/d.jpg">
            </div>

            <span class="cd-handle"></span>
        </figure>
        <!-- cd-image-container -->

        <h1 class="garamond">Cosplay</h1>
        <strong>D & V</strong>
    </div>


</div>

Answer 1

我建议您阅读 fullpage.js FAQs :

My other plugins don't work when using fullPage.js

Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.