Fullpage JS - 全屏滑块，里面有迷你滑块

Question

我正在尝试使用FullPage Slider复制http://www.apple.com/iphone/why-theres-iphone/。主要背景幻灯片非常简单。现在我需要让手机部分也能滑动。

到目前为止我的页面：http://scram.rambo.co.za/

到目前为止我的代码看起来像这样：

<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>

任何想法？

Answer 1

使用callbacks fullpage.js提供（onLeave，afterLoad）或fp-viewing-X-Y上添加的州级body来在手机上执行动画。

请查看this tutorial以获取更多信息。