CodyHouse 的图像比较滑块与 fullPage.js 有冲突

Question

我正在使用 http://codyhouse.co/gem/css-jquery-image-comparison-slider/ and fullpage.js http://alvarotrigo.com/fullPage/ 中的图像滑块，但是，当我将 jquery 放在页眉时，滑块不起作用，但如果我放在底部，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.

CodyHouse 的图像比较滑块与 fullPage.js 有冲突

Image Comparison Slider from CodyHouse have conflict with fullPage.js

jquery

html

css

fullpage.js