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

Question

我使用的图像滑块从http://codyhouse.co/gem/css-jquery-image-comparison-slider/和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：

使用fullPage.js

简短的回答时个

我的其他插件不起作用：在fullPage.js的一个AfterRender回调初始化。

说明：如果使用诸如verticalCentered：true或overflowPage.js的overflowScroll：true之类的选项，则您的内容将被包裹在其他元素中，以更改其在网站的DOM结构中的位置。这样，您的内容将被视为“动态添加的内容”，大多数插件需要网站上最初的内容才能执行其任务。使用afterRender回调初始化插件，fullPage.js确保只有在fullPage.js停止更改站点的DOM结构时才会初始化它们。