Fullpage JS - Vollbild-Slider mit Mini-Slider innerhalb

Question

Ich versuche http://www.apple.com/iphone/why-theres-iphone/ mit FullPage Slider zu replizieren. Die Haupthintergrundfolie ist ziemlich geradlinig. Jetzt muss ich auch den Telefonteil zum rutschen bringen.

Meine Seite bisher: http://scram.rambo.co.za/

Ich habe bisher Code etwas wie folgt aussehen:

<div id="fullpage"> 
    <div class="section" id="section0"> 
    </div> 
    <div class="section" id="section1"> 
    </div> 
    <div class="section" id="section2"> 
    </div> 
    <div class="section" id="section3"> 
    </div> 
</div> 

<figure class="iphone"> 
    <div class="iphone-device"> 
     <div class="iphone-content-wrapper"> 
      <div class="phone-screen screen1"> 
       <div class="screen-wrapper"></div> 
      </div> 
      <div class="phone-screen screen2"> 
       <div class="screen-wrapper"></div> 
      </div> 
      <div class="phone-screen screen3"> 
       <div class="screen-wrapper"></div> 
      </div> 
     </div> 
    </div> 
</figure> 

<script> 
$(document).ready(function() { 
    $('#fullpage').fullpage({ 
     'verticalCentered': false, 
     'css3': true, 
     'navigation': true, 
     'navigationPosition': 'left' 
    }); 
}); 
</script> 

Irgendwelche Ideen?

Answer 1

Verwenden Sie die Callbacks, die fullpage.js bietet (onLeave, afterLoad) oder die State-Class fp-viewing-X-Y hinzugefügt am body, um die Animationen auf dem Telefon durchzuführen.

Betrachten Sie this tutorial für weitere Informationen.