javascript - 如何在固定高度和固定宽度的 div 中包含 fullscreen.js 幻灯片

Question

默认情况下，编写 fullpage.js 的任何示例都是为了以屏幕的最大高度和宽度(全屏)呈现幻灯片。

但是，我试图将幻灯片包含在我的 html 页面中的一个固定大小的 div 中。我有一个固定高度和固定宽度的 div，希望 fullpage.js 幻灯片在该 div 中播放。我试过了，但我无法将高度降低到规定的固定高度。固定宽度效果很好。

<div id="fullpage" style="height: 40px; max-height:200px; width: 500px;">
    <div class="section " id="section0">
        <div class="intro">
            <h1>Responsive</h1>
            <p>This example will turn to normal scroll when the window size gets smaller than 600px height</p>
        </div>
    </div>
    <div class="section" id="section1">
        <div class="slide" id="slide1">
            <div class="intro">
                <h1>Ideal for small screens</h1>
            </div>
        </div>
        <div class="slide" id="slide2">
            <h1>This example uses responsiveHeight: 600</h1>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="intro">
            <h1>Keep it simple!</h1>
        </div>
    </div>
</div>

Answer 1

如前所述here :

This is a FULL PAGE plugin. There's no such option.

但可以通过 CSS 破解它。

代码:

$('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    css3: true,
    verticalCentered:false
});

CSS:

#section0, #section1, #section2 {
    height: auto !important;
}

并且不要忘记 verticalCentered: false 选项。否则你还需要覆盖另一个包装器 fp-table

演示:http://jsfiddle.net/IrvinDominin/o46332j6/

更新

前段时间 fullpage.js 包含一个选项，可以使用 fp-auto-height 类创建更小或更大的部分。

引用:https://github.com/alvarotrigo/fullPage.js#creating-smaller-sections

演示:http://jsfiddle.net/IrvinDominin/o46332j6/2/